refactor: 💡 e2e admin tests - update locators (#2931)

* refactor: 💡 e2e tests - update locators

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-17174

* refactor: 💡 addressing comments

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-17174

* refactor: 💡 update test for session-recording-aws-ent

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-17174

e2e-tests/admin/pages/aliases.js

@@ -21,7 +21,7 @@ export class AliasesPage extends BaseResourcePage {
     await this.page
       .getByRole('link', { name: `Back to ${orgName}`, exact: true })
       .click();
-    await this.page.getByRole('link', { name: 'Orgs' }).click();
+    await this.page.getByRole('link', { name: 'Back to Global' }).click();
     await this.page.getByRole('link', { name: 'Aliases' }).click();
     await expect(
       this.page

e2e-tests/admin/pages/credential-stores.js

@@ -97,7 +97,7 @@ export class CredentialStoresPage extends BaseResourcePage {
     await this.page.getByLabel('Address').fill(vaultAddr);
     await this.page
       .getByLabel('Worker filter')
-      .locator('textarea')
+      .getByRole('textbox')
       .fill(workerFilter);
     await this.page.getByLabel('Token').fill(clientToken);
     await this.page.getByRole('button', { name: 'Save' }).click();

e2e-tests/admin/pages/storage-buckets.js

@@ -31,7 +31,9 @@ export class StorageBucketsPage extends BaseResourcePage {
     await this.page
       .getByRole('link', { name: 'Storage Buckets', exact: true })
       .click();
-    await this.page.getByRole('link', { name: 'New Storage Bucket' }).click();
+    await this.page
+      .getByRole('link', { name: 'New Storage Bucket', exact: true })
+      .click();
     await this.page.getByLabel('Name (Optional)').fill(storageBucketName);
     await this.page.getByLabel('Scope').selectOption({ label: scope });
     await this.page
@@ -44,7 +46,7 @@ export class StorageBucketsPage extends BaseResourcePage {
     await this.page.getByLabel('Secret access key').fill(secretAccessKey);
     await this.page
       .getByLabel('Worker filter')
-      .locator('textarea')
+      .getByRole('textbox')
       .fill(workerFilter);
     await this.page.getByLabel('Disable credential rotation').click();
     await this.page.getByRole('button', { name: 'Save' }).click();
@@ -82,7 +84,9 @@ export class StorageBucketsPage extends BaseResourcePage {
     await this.page
       .getByRole('link', { name: 'Storage Buckets', exact: true })
       .click();
-    await this.page.getByRole('link', { name: 'New Storage Bucket' }).click();
+    await this.page
+      .getByRole('link', { name: 'New Storage Bucket', exact: true })
+      .click();
     await this.page.getByLabel('Name (Optional)').fill(storageBucketName);
     await this.page.getByLabel('Scope').selectOption({ label: scope });
     await this.page
@@ -96,7 +100,7 @@ export class StorageBucketsPage extends BaseResourcePage {
     await this.page.getByLabel('Secret access key').fill(secretAccessKey);
     await this.page
       .getByLabel('Worker filter')
-      .locator('textarea')
+      .getByRole('textbox')
       .fill(workerFilter);
     await this.page.getByLabel('Disable credential rotation').click();
     await this.page.getByRole('button', { name: 'Save' }).click();

e2e-tests/admin/pages/targets.js

@@ -261,8 +261,8 @@ export class TargetsPage extends BaseResourcePage {
       .click();
 
     await this.page
-      .getByRole('cell', { name: hostSourceName })
-      .locator('..')
+      .getByRole('row')
+      .filter({ has: this.page.getByRole('cell', { name: hostSourceName }) })
       .getByRole('checkbox')
       .click({ force: true });
     await this.page.getByRole('button', { name: 'Add Host Sources' }).click();
@@ -274,9 +274,8 @@ export class TargetsPage extends BaseResourcePage {
 
   async removeHostSourceFromTarget(hostSourceName) {
     await this.page
-      .getByRole('link', { name: hostSourceName })
-      .locator('..')
-      .locator('..')
+      .getByRole('row')
+      .filter({ has: this.page.getByRole('link', { name: hostSourceName }) })
       .getByRole('button', { name: 'Manage' })
       .click();
     await this.page.getByRole('button', { name: 'Remove' }).click();
@@ -307,7 +306,7 @@ export class TargetsPage extends BaseResourcePage {
         .getByText('Edit Ingress Worker Filter'),
     ).toBeVisible();
 
-    await this.page.locator('textarea').fill(filter);
+    await this.page.locator('.CodeMirror').getByRole('textbox').fill(filter);
 
     await this.page.getByRole('button', { name: 'Save' }).click();
     await this.dismissSuccessAlert();
@@ -336,7 +335,7 @@ export class TargetsPage extends BaseResourcePage {
         .getByText('Edit Egress Worker Filter'),
     ).toBeVisible();
 
-    await this.page.locator('textarea').fill(filter);
+    await this.page.locator('.CodeMirror').getByRole('textbox').fill(filter);
 
     await this.page.getByRole('button', { name: 'Save' }).click();
     await this.dismissSuccessAlert();
@@ -377,8 +376,8 @@ export class TargetsPage extends BaseResourcePage {
       .click();
 
     await this.page
-      .getByRole('cell', { name: credentialName })
-      .locator('..')
+      .getByRole('row')
+      .filter({ has: this.page.getByRole('cell', { name: credentialName }) })
       .getByRole('checkbox')
       .click({ force: true });
     await this.page
@@ -434,8 +433,8 @@ export class TargetsPage extends BaseResourcePage {
       .click();
 
     await this.page
-      .getByRole('cell', { name: credentialName })
-      .locator('..')
+      .getByRole('row')
+      .filter({ has: this.page.getByRole('cell', { name: credentialName }) })
       .getByRole('checkbox')
       .click({ force: true });
     await this.page

e2e-tests/admin/pages/users.js

@@ -46,8 +46,8 @@ export class UsersPage extends BaseResourcePage {
       .getByRole('link', { name: 'Add Accounts', exact: true })
       .click();
     await this.page
-      .getByRole('cell', { name: loginName })
-      .locator('..')
+      .getByRole('row')
+      .filter({ has: this.page.getByRole('cell', { name: loginName }) })
       .getByRole('checkbox')
       .click({ force: true });
 

e2e-tests/admin/pages/workers.js

@@ -38,9 +38,8 @@ export class WorkersPage extends BaseResourcePage {
    */
   async editTag(origKey, newKey, newValue) {
     await this.page
-      .getByRole('table')
-      .getByRole('cell', { name: origKey })
-      .locator('..')
+      .getByRole('row')
+      .filter({ has: this.page.getByRole('cell', { name: origKey }) })
       .getByRole('cell', { name: 'Overflow Options' })
       .click();
     await this.page.getByRole('button', { name: 'Edit Tag' }).click();
@@ -58,9 +57,8 @@ export class WorkersPage extends BaseResourcePage {
    */
   async removeTag(key) {
     await this.page
-      .getByRole('table')
-      .getByRole('cell', { name: key })
-      .locator('..')
+      .getByRole('row')
+      .filter({ has: this.page.getByRole('cell', { name: key }) })
       .getByRole('cell', { name: 'Overflow Options' })
       .click();
     await this.page.getByRole('button', { name: 'Remove Tag' }).click();

e2e-tests/admin/tests/auth-method-ldap.spec.js

@@ -223,15 +223,15 @@ test(
 
       await expect(
         page
-          .getByRole('cell', { name: ldapAccountName })
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('cell', { name: ldapAccountName }) })
           .getByRole('cell')
           .nth(fullNameIndex),
       ).toHaveText(ldapUserName);
       await expect(
         page
-          .getByRole('cell', { name: ldapAccountName })
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('cell', { name: ldapAccountName }) })
           .getByRole('cell')
           .nth(emailIndex),
       ).toHaveText(ldapUserName + '@mail.com');
@@ -265,15 +265,15 @@ test(
 
       await expect(
         page
-          .getByRole('cell', { name: ldapAccountName })
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('cell', { name: ldapAccountName }) })
           .getByRole('cell')
           .nth(fullNameIndex),
       ).toHaveText(ldapUserName);
       await expect(
         page
-          .getByRole('cell', { name: ldapAccountName })
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('cell', { name: ldapAccountName }) })
           .getByRole('cell')
           .nth(emailIndex),
       ).toHaveText(ldapUserName + '@mail.com');

e2e-tests/admin/tests/auth-method-oidc-vault.spec.js

@@ -181,15 +181,15 @@ test(
 
       await expect(
         page
-          .getByRole('cell', { name: userName })
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('cell', { name: userName }) })
           .getByRole('cell')
           .nth(fullNameIndex),
       ).toHaveText(userName);
       await expect(
         page
-          .getByRole('cell', { name: userName })
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('cell', { name: userName }) })
           .getByRole('cell')
           .nth(emailIndex),
       ).toHaveText(email);
@@ -223,15 +223,15 @@ test(
 
       await expect(
         page
-          .getByRole('cell', { name: userName })
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('cell', { name: userName }) })
           .getByRole('cell')
           .nth(fullNameIndex),
       ).toHaveText(userName);
       await expect(
         page
-          .getByRole('cell', { name: userName })
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('cell', { name: userName }) })
           .getByRole('cell')
           .nth(emailIndex),
       ).toHaveText(email);

e2e-tests/admin/tests/credential-store-static-ent.spec.js

@@ -69,9 +69,8 @@ test(
 
       // Remove a credential from the target
       await page
-        .getByRole('link', { name: credentialName2 })
-        .locator('..')
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('link', { name: credentialName2 }) })
         .getByRole('button', { name: 'Manage' })
         .click();
       await page.getByRole('button', { name: 'Remove' }).click();
@@ -92,9 +91,8 @@ test(
 
       // Remove a credential from the target
       await page
-        .getByRole('link', { name: credentialName2 })
-        .locator('..')
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('link', { name: credentialName2 }) })
         .getByRole('button', { name: 'Manage' })
         .click();
       await page.getByRole('button', { name: 'Remove' }).click();

e2e-tests/admin/tests/credential-store-static.spec.js

@@ -303,9 +303,8 @@ test(
 
       // Remove the host source from the target
       await page
-        .getByRole('link', { name: credentialName2 })
-        .locator('..')
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('link', { name: credentialName2 }) })
         .getByRole('button', { name: 'Manage' })
         .click();
       await page.getByRole('button', { name: 'Remove' }).click();

e2e-tests/admin/tests/dynamic-host-catalog-aws-ent.spec.js

@@ -172,9 +172,8 @@ test.describe('AWS', () => {
 
         // Remove the host source from the target
         await page
-          .getByRole('link', { name: newHostSetName })
-          .locator('..')
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('link', { name: newHostSetName }) })
           .getByRole('button', { name: 'Manage' })
           .click();
         await page.getByRole('button', { name: 'Remove' }).click();

e2e-tests/admin/tests/dynamic-host-catalog-aws.spec.js

@@ -172,9 +172,8 @@ test.describe('AWS', () => {
 
         // Remove the host source from the target
         await page
-          .getByRole('link', { name: newHostSetName })
-          .locator('..')
-          .locator('..')
+          .getByRole('row')
+          .filter({ has: page.getByRole('link', { name: newHostSetName }) })
           .getByRole('button', { name: 'Manage' })
           .click();
         await page.getByRole('button', { name: 'Remove' }).click();

e2e-tests/admin/tests/session-recording-aws-ent.spec.js

@@ -65,7 +65,12 @@ test(
       await page
         .getByRole('link', { name: `Back to ${orgName}`, exact: true })
         .click();
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
+      await page
+        .getByRole('link', { name: 'Back to Global', exact: true })
+        .click();
+      await page
+        .getByRole('link', { name: 'Storage Buckets', exact: true })
+        .click();
       const storageBucketsPage = new StorageBucketsPage(page);
       const storageBucketName = await storageBucketsPage.createStorageBucketAws(
         orgName,
@@ -113,14 +118,9 @@ test(
       await page
         .getByRole('link', { name: `Back to ${orgName}`, exact: true })
         .click();
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
-      await expect(page.getByRole('heading', { name: 'Orgs' })).toBeVisible();
-      await page.getByRole('link', { name: orgName }).click();
-      await expect(
-        page
-          .getByRole('navigation', { name: 'breadcrumbs' })
-          .getByText(orgName),
-      ).toBeVisible();
+      await page
+        .getByRole('link', { name: 'Storage Policies', exact: true })
+        .click();
       const storagePoliciesPage = new StoragePoliciesPage(page);
       policyName = await storagePoliciesPage.createStoragePolicy();
       await orgsPage.attachStoragePolicy(policyName);
@@ -141,8 +141,8 @@ test(
       const sessionsPage = new SessionsPage(page);
       await sessionsPage.waitForSessionToBeVisible(targetName);
       await page
-        .getByRole('cell', { name: targetName })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: targetName }) })
         .getByRole('button', { name: 'Cancel' })
         .click();
       await expect(
@@ -155,7 +155,9 @@ test(
       await page
         .getByRole('link', { name: `Back to ${orgName}`, exact: true })
         .click();
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
+      await page
+        .getByRole('link', { name: 'Back to Global', exact: true })
+        .click();
       await page
         .getByRole('navigation', { name: 'Application local navigation' })
         .getByRole('link', { name: 'Session Recordings', exact: true })
@@ -165,22 +167,14 @@ test(
         .getByRole('link', { name: 'View' })
         .click();
       await page
-        .getByRole('cell', { name: 'Channel 1' })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: 'Channel 1' }) })
         .getByRole('link', { name: 'Play' })
         .click();
       await page.locator('div.session-recording-player').hover();
       await page.locator('.ap-playback-button').click();
 
       // Edit storage policy: do not protect from deletion
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
-      await expect(page.getByRole('heading', { name: 'Orgs' })).toBeVisible();
-      await page.getByRole('link', { name: orgName }).click();
-      await expect(
-        page
-          .getByRole('navigation', { name: 'breadcrumbs' })
-          .getByText(orgName),
-      ).toBeVisible();
       await page
         .getByRole('link', { name: 'Storage Policies', exact: true })
         .click();
@@ -199,7 +193,9 @@ test(
       await page.getByRole('button', { name: 'Dismiss' }).click();
 
       // Re-apply storage policy to the session recording and delete
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
+      await page
+        .getByRole('link', { name: 'Back to Global', exact: true })
+        .click();
       await page
         .getByRole('link', { name: 'Session Recordings', exact: true })
         .click();
@@ -212,7 +208,9 @@ test(
       await sessionRecordingsPage.deleteResource();
 
       // Detach storage bucket from target
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
+      await page
+        .getByRole('link', { name: 'Back to Global', exact: true })
+        .click();
       await expect(page.getByRole('heading', { name: 'Orgs' })).toBeVisible();
       await page.getByRole('link', { name: orgName }).click();
       await page.getByRole('link', { name: projectName }).click();

e2e-tests/admin/tests/session-recording-minio-ent.spec.js

@@ -67,7 +67,12 @@ test(
       await page
         .getByRole('link', { name: `Back to ${orgName}`, exact: true })
         .click();
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
+      await page
+        .getByRole('link', { name: 'Back to Global', exact: true })
+        .click();
+      await page
+        .getByRole('link', { name: 'Storage Buckets', exact: true })
+        .click();
       const storageBucketsPage = new StorageBucketsPage(page);
       const storageBucketName =
         await storageBucketsPage.createStorageBucketMinio(
@@ -121,14 +126,9 @@ test(
       await page
         .getByRole('link', { name: `Back to ${orgName}`, exact: true })
         .click();
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
-      await expect(page.getByRole('heading', { name: 'Orgs' })).toBeVisible();
-      await page.getByRole('link', { name: orgName }).click();
-      await expect(
-        page
-          .getByRole('navigation', { name: 'breadcrumbs' })
-          .getByText(orgName),
-      ).toBeVisible();
+      await page
+        .getByRole('link', { name: 'Storage Policies', exact: true })
+        .click();
       const storagePoliciesPage = new StoragePoliciesPage(page);
       policyName = await storagePoliciesPage.createStoragePolicy();
       await orgsPage.attachStoragePolicy(policyName);
@@ -149,8 +149,8 @@ test(
       const sessionsPage = new SessionsPage(page);
       await sessionsPage.waitForSessionToBeVisible(targetName);
       await page
-        .getByRole('cell', { name: targetName })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: targetName }) })
         .getByRole('button', { name: 'Cancel' })
         .click();
       await expect(
@@ -163,7 +163,9 @@ test(
       await page
         .getByRole('link', { name: `Back to ${orgName}`, exact: true })
         .click();
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
+      await page
+        .getByRole('link', { name: 'Back to Global', exact: true })
+        .click();
       await page
         .getByRole('navigation', { name: 'Application local navigation' })
         .getByRole('link', { name: 'Session Recordings', exact: true })
@@ -173,22 +175,14 @@ test(
         .getByRole('link', { name: 'View' })
         .click();
       await page
-        .getByRole('cell', { name: 'Channel 1' })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: 'Channel 1' }) })
         .getByRole('link', { name: 'Play' })
         .click();
       await page.locator('div.session-recording-player').hover();
       await page.locator('.ap-playback-button').click();
 
       // Edit storage policy: do not protect from deletion
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
-      await expect(page.getByRole('heading', { name: 'Orgs' })).toBeVisible();
-      await page.getByRole('link', { name: orgName }).click();
-      await expect(
-        page
-          .getByRole('navigation', { name: 'breadcrumbs' })
-          .getByText(orgName),
-      ).toBeVisible();
       await page
         .getByRole('link', { name: 'Storage Policies', exact: true })
         .click();
@@ -207,7 +201,9 @@ test(
       await page.getByRole('button', { name: 'Dismiss' }).click();
 
       // Re-apply storage policy to the session recording and delete
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
+      await page
+        .getByRole('link', { name: 'Back to Global', exact: true })
+        .click();
       await page
         .getByRole('link', { name: 'Session Recordings', exact: true })
         .click();
@@ -220,7 +216,9 @@ test(
       await sessionRecordingsPage.deleteResource();
 
       // Detach storage bucket from target
-      await page.getByRole('link', { name: 'Orgs', exact: true }).click();
+      await page
+        .getByRole('link', { name: 'Back to Global', exact: true })
+        .click();
       await expect(page.getByRole('heading', { name: 'Orgs' })).toBeVisible();
       await page.getByRole('link', { name: orgName }).click();
       await page.getByRole('link', { name: projectName }).click();

e2e-tests/admin/tests/target-ent.spec.js

@@ -69,8 +69,8 @@ test(
       const sessionsPage = new SessionsPage(page);
       await sessionsPage.waitForSessionToBeVisible(targetName);
       await page
-        .getByRole('cell', { name: targetName })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: targetName }) })
         .getByRole('button', { name: 'Cancel' })
         .click();
     } finally {
@@ -143,8 +143,8 @@ test(
       const sessionsPage = new SessionsPage(page);
       await sessionsPage.waitForSessionToBeVisible(targetName);
       await page
-        .getByRole('cell', { name: targetName })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: targetName }) })
         .getByRole('button', { name: 'Cancel' })
         .click();
     } finally {
@@ -200,9 +200,8 @@ test(
       // Add/Remove another host source
       await targetsPage.addHostSourceToTarget(hostSetName2);
       await page
-        .getByRole('link', { name: hostSetName2 })
-        .locator('..')
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('link', { name: hostSetName2 }) })
         .getByRole('button', { name: 'Manage' })
         .click();
       await page.getByRole('button', { name: 'Remove' }).click();
@@ -245,8 +244,8 @@ test(
       const sessionsPage = new SessionsPage(page);
       await sessionsPage.waitForSessionToBeVisible(targetName);
       await page
-        .getByRole('cell', { name: targetName })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: targetName }) })
         .getByRole('button', { name: 'Cancel' })
         .click();
     } finally {

e2e-tests/admin/tests/target.spec.js

@@ -88,8 +88,8 @@ test(
       const sessionsPage = new SessionsPage(page);
       await sessionsPage.waitForSessionToBeVisible(targetName);
       await page
-        .getByRole('cell', { name: targetName })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: targetName }) })
         .getByRole('button', { name: 'Cancel' })
         .click();
     } finally {
@@ -155,8 +155,8 @@ test(
       const sessionsPage = new SessionsPage(page);
       await sessionsPage.waitForSessionToBeVisible(targetName);
       await page
-        .getByRole('cell', { name: targetName })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: targetName }) })
         .getByRole('button', { name: 'Cancel' })
         .click();
     } finally {
@@ -230,10 +230,16 @@ test(
       ).toBeVisible();
       await expect(page.getByText('"dev" in "/tags/type"')).toBeVisible();
 
-      await page.locator('textarea').click({ force: true });
+      await page
+        .locator('.CodeMirror')
+        .getByRole('textbox')
+        .click({ force: true });
       await page.keyboard.press('Meta+A');
       await page.keyboard.press('Backspace');
-      await page.locator('textarea').fill('"prod" in "/tags/type"');
+      await page
+        .locator('.CodeMirror')
+        .getByRole('textbox')
+        .fill('"prod" in "/tags/type"');
       await page.getByRole('button', { name: 'Save' }).click();
       const basePage = new BasePage(page);
       await basePage.dismissSuccessAlert();

e2e-tests/admin/tests/worker-tags.spec.js

@@ -166,9 +166,8 @@ test(
     ).toHaveText('config');
     await expect(
       page
-        .getByRole('table')
-        .getByRole('cell', { name: tagKey })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: tagKey }) })
         .getByRole('cell', { name: tagValue }),
     ).toBeVisible();
 
@@ -178,9 +177,8 @@ test(
     await workersPage.editTag(tagKey, newTagKey, newTagValue);
     await expect(
       page
-        .getByRole('table')
-        .getByRole('cell', { name: newTagKey })
-        .locator('..')
+        .getByRole('row')
+        .filter({ has: page.getByRole('cell', { name: newTagKey }) })
         .getByRole('cell', { name: newTagValue }),
     ).toBeVisible();