fix: making rest of tests work

tests/basic-homepage.spec.ts

@@ -1,5 +1,7 @@
 import { expect, test } from '@playwright/test';
 
+test.describe.configure({ mode: 'parallel' });
+
 /**
  * This file contains tests that confirm our main site, https://shopcanal.com, is up and
  * running as intended. Just the basics.

tests/homepage-faq.spec.ts

@@ -1,5 +1,7 @@
 import { expect, test } from '@playwright/test';
 
+test.describe.configure({ mode: 'parallel' });
+
 /**
  * This file contains tests that confirm our main dev site, https://develop.shopcanal.com, has an
  * FAQ section that's working as expected. Checks each FAQ text for visibility and makes
@@ -20,47 +22,40 @@ const FAQ_TEXT = [
 ];
 
 // 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
+  // Makes sure each of the FAQs exist, but the collapsible items aren't yet visible
   for (const item of FAQ_TEXT) {
-    const selector = `button:has(:text("${item}"))`;
+    const selector = `button:has-text("${item}")`;
     const faq = page.locator(selector);
-    await faq.waitFor({
-      state: 'attached',
-    });
-
-    const collapsibleElement = page.locator(`:below(${selector})`);
-    await collapsibleElement.waitFor({ state: 'attached' });
+    await faq.waitFor();
 
-    // Make sure both the FAQ and the collapsible element exists
-    expect(faq).toBeTruthy();
+    // There's two, the second is the cookie banner
+    const collapsibleElement = page.locator(`.react-reveal:below(${selector}) >> nth=0`);
+    await collapsibleElement.waitFor({ state: 'detached' });
   }
 });
 
 test('First FAQ dropdown can be clicked on', async ({ page }) => {
-  const height = async () => {
-    const locator = page.locator(EXPANDED_SELECTOR);
-    await page.pause();
-    const box = await locator.boundingBox();
-    return box?.height ?? 0;
-  };
+  const faqText = page.locator(`button:has-text("${FAQ_TEXT[0]}")`);
+  // There's two, the second is the cookie banner
+  const collapsibleElement = page.locator(
+    `.react-reveal:below(button:has-text("${FAQ_TEXT[0]}")) >> nth=0`,
+  );
 
   await page.goto(MAIN_SITE);
 
-  // Starts out closed and minimized
-  expect(await height()).toBe(0);
+  // Starts out unattached in the DOM
+  await collapsibleElement.waitFor({ state: 'detached' });
 
   // 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({
+  await faqText.click();
+  await collapsibleElement.waitFor({
     state: 'visible',
   });
 
-  // Ensure it's now visible and larger than 0
-  expect(await height()).toBeGreaterThan(0);
+  // Ensure it's now visible and height is larger than 0
+  const box = await collapsibleElement.boundingBox();
+  expect(box?.height).toBeGreaterThan(0);
 });

tests/install.spec.ts

@@ -6,6 +6,8 @@
 import { expect, test } from '@playwright/test';
 import { SK_APP_URL } from '../helpers/routes';
 
+test.describe.configure({ mode: 'parallel' });
+
 const SHOPIFY_AUTH_URL_RE = /https:\/\/accounts.shopify.com\/lookup/;
 
 test.describe('Visit to the Shopify App Url', () => {

tests/login.spec.ts

@@ -5,7 +5,9 @@ import {
   LOGIN_EMAIL_INPUT_SELECTOR,
   LOGIN_PASSWORD_INPUT_SELECTOR,
 } from '../helpers/login';
-import { LOGIN_PAGE } from '../helpers/routes';
+import { SHOPKEEP_ROUTES } from '../helpers/routes';
+
+test.describe.configure({ mode: 'parallel' });
 
 /**
  * This file contains tests that confirm our login page at /login works correctly.
@@ -17,7 +19,7 @@ test.describe('Login', () => {
    * do that in a beforeEach instead of doing it in each test
    */
   test.beforeEach(async ({ page }) => {
-    await page.goto(LOGIN_PAGE);
+    await page.goto(SHOPKEEP_ROUTES.LOGIN);
     await page.waitForLoadState('networkidle');
   });
 
@@ -42,14 +44,15 @@ test.describe('Login', () => {
     await page.fill(LOGIN_PASSWORD_INPUT_SELECTOR, 'notarealaccountpassword');
 
     // Click the login button
-    await page.click(LOGIN_BUTTON_SELECTOR);
+    const loginButton = page.locator(LOGIN_BUTTON_SELECTOR);
+    await loginButton.click();
 
     // Wait for the error to display
     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);
+    expect(page.url()).toBe(SHOPKEEP_ROUTES.LOGIN);
   });
 
   /**
@@ -58,9 +61,9 @@ test.describe('Login', () => {
    */
   test('button cannot be clicked if email and password are not filled out', async ({ page }) => {
     // Get the login button element
-    const button = await page.$(LOGIN_BUTTON_SELECTOR);
+    const button = page.locator(LOGIN_BUTTON_SELECTOR);
 
-    // Check if the button is disabled
-    if (button) expect(await button.isDisabled()).toBeTruthy();
+    // Make sure button is disabled
+    expect(await button.isDisabled()).toBeTruthy();
   });
 });

tests/screenshots.spec.ts

@@ -12,6 +12,8 @@ const SCREENSHOTS: Record<string, string> = {
   terms: 'https://shopcanal.com/terms',
 };
 
+test.describe.configure({ mode: 'parallel' });
+
 test('Home - take screenshots', async ({ page }) => {
   for (const screenshotName of Object.keys(SCREENSHOTS)) {
     await page.goto(SCREENSHOTS[screenshotName]);