fix: convert to locators instead of selectors

README.md

@@ -33,7 +33,7 @@ https://playwright.dev/docs/test-intro/ for more information about how it functi
 
 ### Running tests manually
 
-Use `yarn test` to run all tests, or `yarn tests.specific tests/x` to run test `x.spec.ts` in the tests folder. You can add
+Use `yarn test` to run all tests, or `yarn test tests/x` to run test `x.spec.ts` in the tests folder. You can add
 as many tests to run as you want instead of running all them. Running all tests on all browsers can be done with
 `yarn test.all`.
 

helpers/login.ts

@@ -25,7 +25,8 @@ const logIn = async (
 
     // Navigate to login page and wait for login button to load
     await page.goto(LOGIN_PAGE);
-    await page.waitForSelector(LOGIN_BUTTON_SELECTOR);
+    const locator = page.locator(LOGIN_BUTTON_SELECTOR);
+    await locator.waitFor();
 
     // Fill out email and password
     await page.fill(LOGIN_EMAIL_INPUT_SELECTOR, E2E_ACCOUNT_LOGIN);

package.json

@@ -30,8 +30,7 @@
   },
   "scripts": {
     "prepare": "husky install",
-    "test.specific": "playwright test",
-    "test": "playwright test tests",
+    "test": "playwright test",
     "test.all": "yarn test --browser=all",
     "debug": "PWDEBUG=1 yarn test",
     "help": "playwright --help",

tests/homepage-faq.spec.ts

@@ -19,52 +19,48 @@ const FAQ_TEXT = [
   "How do I access Canal's network of brands?",
 ];
 
-// The element that has "Canal helps D2C brands" within it and is a collapsible element
-const COLLAPSIBLE_SELECTOR = '#basic-collapsible:has(:text("Canal helps D2C brands"))';
+// The element that shows up when we click on an FAQ element has the class react-reveal, so it should be hidden to start with, then show up when clicked
+const EXPANDED_SELECTOR = `:below(text=${FAQ_TEXT[0]}) .react-reveal`;
 
 test('Has all FAQs', async ({ page }) => {
   await page.goto(MAIN_SITE);
 
   // Captures the parent of the dropdown containers that have inside of them button + basic collapsible elements
   for (const item of FAQ_TEXT) {
     const selector = `button:has(:text("${item}"))`;
-    const faq = await page.waitForSelector(selector, {
+    const faq = page.locator(selector);
+    await faq.waitFor({
       state: 'attached',
     });
 
-    const collapsibleElement = await page.waitForSelector(`:below(${selector})`, {
-      state: 'attached',
-    });
+    const collapsibleElement = page.locator(`:below(${selector})`);
+    await collapsibleElement.waitFor({ state: 'attached' });
 
     // Make sure both the FAQ and the collapsible element exists
     expect(faq).toBeTruthy();
-    expect(collapsibleElement).toBeTruthy();
   }
 });
 
 test('First FAQ dropdown can be clicked on', async ({ page }) => {
-  const expandedState = () => page.getAttribute(COLLAPSIBLE_SELECTOR, 'aria-expanded');
-
-  const height = async (state: 'attached' | 'visible') => {
-    const element = await page.waitForSelector(COLLAPSIBLE_SELECTOR, {
-      state,
-    });
-    const box = await element.boundingBox();
+  const height = async () => {
+    const locator = page.locator(EXPANDED_SELECTOR);
+    await page.pause();
+    const box = await locator.boundingBox();
     return box?.height ?? 0;
   };
 
   await page.goto(MAIN_SITE);
 
   // Starts out closed and minimized
-  expect(await expandedState()).toBe('false');
-  expect(await height('attached')).toBe(0);
+  expect(await height()).toBe(0);
 
-  // Open the dropdown
+  // Open the dropdown and wait till it's onscreen and the bounding box has stopped changing
   await page.click(`text=${FAQ_TEXT[0]}`);
+  const locator = page.locator(EXPANDED_SELECTOR);
+  await locator.waitFor({
+    state: 'visible',
+  });
 
-  setTimeout(() => '', 1000);
-
-  // Ensure it's open and larger than 0
-  expect(await expandedState()).toBe('true');
-  expect(await height('visible')).toBeGreaterThan(0);
+  // Ensure it's now visible and larger than 0
+  expect(await height()).toBeGreaterThan(0);
 });

tests/login.spec.ts

@@ -45,7 +45,8 @@ test.describe('Login', () => {
     await page.click(LOGIN_BUTTON_SELECTOR);
 
     // Wait for the error to display
-    await page.waitForSelector('text=Failed to log in');
+    const locator = page.locator('text=Failed to log in');
+    await locator.waitFor();
 
     // Ensure that the URL is still the login page
     expect(page.url()).toBe(LOGIN_PAGE);

tests/shopkeep/inventory-management.spec.ts

@@ -22,7 +22,8 @@ test.describe('Shopkeep Inventory Management', () => {
     await page.click('text=Activate');
 
     // Wait for the product management modal to display
-    await page.waitForSelector('text=Manage product');
+    const locator = page.locator('text=Manage product');
+    await locator.waitFor();
 
     // We expect the 'Save' button to be disabled
     let button = await page.$('button#save-product-status-button');
@@ -46,7 +47,8 @@ test.describe('Shopkeep Inventory Management', () => {
     await page.click('text=Add to Shopify as Draft');
 
     // Wait for the payment information modal to display
-    await page.waitForSelector('text=Provide payment information to proceed');
+    const locator = page.locator('text=Provide payment information to proceed');
+    await locator.waitFor();
 
     // Expect the 'Save & Agree' button to be disabled
     let button = await page.$('text=Save & Agree');

tests/shopkeep/navigation.spec.ts

@@ -26,7 +26,8 @@ test.describe('Shopkeep Navigation', () => {
     // Click the Overview link in the nav
     await page.click('#navOverview');
 
-    await page.waitForSelector('text=Inventory');
+    const locator = page.locator('text=Inventory');
+    await locator.waitFor();
 
     // Ensure that the URL is for the SK inventory page
     expect(page.url().includes(SHOPKEEP_ROUTES.INVENTORY)).toBeTruthy();
@@ -36,7 +37,8 @@ test.describe('Shopkeep Navigation', () => {
     // Click the Discover link in the nav
     await page.click('#navDiscover');
 
-    await page.waitForSelector('text=Discover');
+    const locator = page.locator('text=Discover');
+    await locator.waitFor();
 
     // Ensure that the URL is for the SK discover page
     expect(page.url().includes(SHOPKEEP_ROUTES.DISCOVER)).toBeTruthy();
@@ -46,7 +48,8 @@ test.describe('Shopkeep Navigation', () => {
     // Click the Requests link in the nav
     await page.click('#navRequests');
 
-    await page.waitForSelector('text=Requests');
+    const locator = page.locator('text=Requests');
+    await locator.waitFor();
 
     // Ensure that the URL is for the SK requests page
     expect(page.url().includes(SHOPKEEP_ROUTES.REQUESTS)).toBeTruthy();
@@ -56,7 +59,8 @@ test.describe('Shopkeep Navigation', () => {
     // Click the Orders link in the nav
     await page.click('#navOrders');
 
-    await page.waitForSelector("text=This is where you'll see your Orders");
+    const locator = page.locator("text=This is where you'll see your Orders");
+    await locator.waitFor();
 
     // Ensure that the URL is for the SK orders page
     expect(page.url().includes(SHOPKEEP_ROUTES.ORDERS)).toBeTruthy();
@@ -66,7 +70,8 @@ test.describe('Shopkeep Navigation', () => {
     // Click the Settings link in the nav
     await page.click('#navSettings');
 
-    await page.waitForSelector('text=Email address');
+    const locator = page.locator('text=Email address');
+    await locator.waitFor();
 
     // Ensure that the URL is for the SK settings page
     expect(page.url()).toBe(SHOPKEEP_ROUTES.SETTINGS);
@@ -76,7 +81,8 @@ test.describe('Shopkeep Navigation', () => {
     // Click the FAQ link in the nav
     await page.click('#navFAQ');
 
-    await page.waitForSelector('text=Frequently Asked Questions');
+    const locator = page.locator('text=Frequently Asked Questions');
+    await locator.waitFor();
 
     // Ensure that the URL is for the SK FAQ page
     expect(page.url()).toBe(SHOPKEEP_ROUTES.FAQ);

tests/shopkeep/requests.spec.ts

@@ -38,18 +38,23 @@ test.describe('Shopkeep Requests', () => {
     expect(requestLineItems.length).toBe(2);
 
     // Check that we have all four filtering buttons - All, Approved, Pending, Rejected
-    await page.waitForSelector(ALL_TAB_SELECTOR);
-    await page.waitForSelector(APPROVED_TAB_SELECTOR);
-    await page.waitForSelector(PENDING_TAB_SELECTOR);
-    await page.waitForSelector(REJECTED_TAB_SELECTOR);
+    let locator = page.locator(ALL_TAB_SELECTOR);
+    await locator.waitFor();
+    locator = page.locator(APPROVED_TAB_SELECTOR);
+    await locator.waitFor();
+    locator = page.locator(PENDING_TAB_SELECTOR);
+    await locator.waitFor();
+    locator = page.locator(REJECTED_TAB_SELECTOR);
+    await locator.waitFor();
   });
 
   test('clicking the Pending tab shows only one pending request', async ({ page }) => {
     // Click the "Pending" tab and make sure it is selected
     await page.click(PENDING_TAB_SELECTOR);
 
     // Wait for the request data to load before continuing
-    await page.waitForSelector('text=Showing 1 product request');
+    const locator = page.locator('text=Showing 1 product request');
+    await locator.waitFor();
 
     // Check that there is one list item
     const requestLineItems = await page.$$(LIST_ITEM_SELECTOR);
@@ -61,15 +66,17 @@ test.describe('Shopkeep Requests', () => {
   }) => {
     // Click the "Rejected" tab and wait for the empty state to appear
     await page.click(REJECTED_TAB_SELECTOR);
-    await page.waitForSelector("text=This is where you'll view your requests");
+    let locator = page.locator("text=This is where you'll view your requests");
+    await locator.waitFor();
 
     // Check that there are no list items
     let requestLineItems = await page.$$(LIST_ITEM_SELECTOR);
     expect(requestLineItems.length).toBe(0);
 
     // Click the "All" tab
     await page.click(ALL_TAB_SELECTOR);
-    await page.waitForSelector('text=Showing 2 product requests');
+    locator = page.locator('text=Showing 2 product requests');
+    await locator.waitFor();
 
     // Check that there are two list items
     requestLineItems = await page.$$(LIST_ITEM_SELECTOR);

tests/supplier/navigation.spec.ts

@@ -16,7 +16,8 @@ test.describe('Supplier Navigation', () => {
 
     // Navigate to the overview page of the Supplier app
     await page.goto(SUPPLIER_ROUTES.OVERVIEW);
-    await page.waitForSelector('text=Welcome to Canal');
+    const locator = page.locator('text=Welcome to Canal');
+    await locator.waitFor();
     await page.waitForLoadState('networkidle');
   });
 
@@ -25,19 +26,26 @@ test.describe('Supplier Navigation', () => {
   });
 
   test('renders the SUP Overview page', async ({ page }) => {
-    await page.waitForSelector('text=Welcome to Canal');
-    await page.waitForSelector('text=The status of products listed on Canal is shown here.');
-    await page.waitForSelector('text=The percentage of each sale your storefront partners keep.');
-    await page.waitForSelector("text=View Canal's terms and conditions here at any time.");
+    let locator = page.locator('text=Welcome to Canal');
+    await locator.waitFor();
+    locator = page.locator('text=The status of products listed on Canal is shown here.');
+    await locator.waitFor();
+    locator = page.locator('text=The percentage of each sale your storefront partners keep.');
+    await locator.waitFor();
+    locator = page.locator("text=View Canal's terms and conditions here at any time.");
+    await locator.waitFor();
   });
 
   test('can navigate successfully to the Settings page from the Settings tab', async ({ page }) => {
     // Click the Settings link in the nav
     await page.click('button#Settings');
 
-    await page.waitForSelector('text=Commission Rate');
-    await page.waitForSelector('text=Email address');
-    await page.waitForSelector('text=Logo & description');
+    let locator = page.locator('text=Commission Rate');
+    await locator.waitFor();
+    locator = page.locator('text=Email address');
+    await locator.waitFor();
+    locator = page.locator('text=Logo & description');
+    await locator.waitFor();
 
     // Ensure that the URL is for the SUP settings page
     expect(page.url().includes(SUPPLIER_ROUTES.SETTINGS)).toBeTruthy();
@@ -49,12 +57,14 @@ test.describe('Supplier Navigation', () => {
     // Click the Inventory link in the nav
     await page.click('button#Inventory');
 
-    await page.waitForSelector(
+    let locator = page.locator(
       'text=These products are available on Canal so storefronts can request to sell.',
     );
-    await page.waitForSelector(
+    await locator.waitFor();
+    locator = page.locator(
       'text=Add unlisted products to Canal so storefronts can request to sell.',
     );
+    await locator.waitFor();
 
     // Ensure that the URL is for the SUP inventory page
     expect(page.url().includes(SUPPLIER_ROUTES.INVENTORY)).toBeTruthy();
@@ -64,9 +74,10 @@ test.describe('Supplier Navigation', () => {
     // Click the Discover link in the nav
     await page.click('button#Discover');
 
-    await page.waitForSelector(
+    const locator = page.locator(
       "text=Pre-approve storefronts so that they don't need to request. You can choose which products to approve.",
     );
+    await locator.waitFor();
 
     // Ensure that the URL is for the SUP discover page
     expect(page.url().includes(SUPPLIER_ROUTES.DISCOVER)).toBeTruthy();
@@ -77,10 +88,14 @@ test.describe('Supplier Navigation', () => {
     await page.click('button#Requests');
 
     // Expect to see the four tabs for filtering requests
-    await page.waitForSelector('button#All-requests-tab');
-    await page.waitForSelector('button#Approved-requests-tab');
-    await page.waitForSelector('button#Pending-requests-tab');
-    await page.waitForSelector('button#Rejected-requests-tab');
+    let locator = page.locator('button#All-requests-tab');
+    await locator.waitFor();
+    locator = page.locator('button#Approved-requests-tab');
+    await locator.waitFor();
+    locator = page.locator('button#Pending-requests-tab');
+    await locator.waitFor();
+    locator = page.locator('button#Rejected-requests-tab');
+    await locator.waitFor();
 
     // Ensure that the URL is for the SUP Requests page
     expect(page.url().includes(SUPPLIER_ROUTES.REQUESTS)).toBeTruthy();