test(core): adjust customer specific tests

bigcommerce · Sep 5, 2024 · df60996 · df60996
1 parent ed3ff2e
commit df60996
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 89 deletions.
diff --git a/core/playwright.config.ts b/core/playwright.config.ts
@@ -40,7 +40,6 @@ export default defineConfig({
       maxDiffPixelRatio: 0.02,
     },
   },
-  fullyParallel: !!process.env.CI,
   reporter: process.env.CI
     ? [['list'], ['monocart-reporter']]
     : [

diff --git a/core/tests/ui/desktop/e2e/account.spec.ts b/core/tests/ui/desktop/e2e/account.spec.ts
@@ -14,14 +14,15 @@ const zipCode = '76286';
 
 async function loginWithUserAccount(page: Page, email: string, password: string) {
   await page.goto('/login/');
-  await page.getByLabel('Login').click();
   await page.getByLabel('Email').fill(email);
   await page.getByLabel('Password').fill(password);
   await page.getByRole('button', { name: 'Log in' }).click();
 
   await page.waitForURL('/account/');
 }
 
+test.describe.configure({ mode: 'serial' });
+
 test('Account access is restricted for guest users', async ({ page }) => {
   await page.goto('/account/settings');
 

diff --git a/core/tests/ui/desktop/e2e/checkout.spec.ts b/core/tests/ui/desktop/e2e/checkout.spec.ts
@@ -3,21 +3,23 @@ import { expect, Page } from '@playwright/test';
 
 import { test } from '~/tests/fixtures';
 
-const sampleProduct = '[Sample] Laundry Detergent';
-const testUser = faker.person.firstName();
-const actionTimeout = 10000;
+const testAccountEmail = process.env.TEST_ACCOUNT_EMAIL || '';
+const testAccountPassword = process.env.TEST_ACCOUNT_PASSWORD || '';
+const firstName = faker.person.firstName();
+const lastName = faker.person.lastName();
 
 async function enterShopperDetails(page: Page) {
-  await page.getByLabel('First Name').fill(testUser, { timeout: actionTimeout });
-  await page.getByLabel('Last Name').fill(faker.person.lastName(), { timeout: actionTimeout });
-  await page.getByLabel('Company Name (Optional)').fill('BigCommerce', { timeout: actionTimeout });
+  // Wait for the shipping form to load as playwright can fill out the form faster than the form is loaded in.
   await page
-    .getByLabel('Phone Number (Optional)')
-    .fill(faker.phone.number(), { timeout: actionTimeout });
-  await page
-    .getByLabel('Address', { exact: true })
-    .fill(faker.location.buildingNumber(), { timeout: actionTimeout });
-  await page.getByLabel('City').fill('Natick', { timeout: actionTimeout });
+    .locator('.checkout-step--shipping .checkout-view-content[aria-busy="false"]')
+    .waitFor();
+
+  await page.getByLabel('First Name').fill(firstName);
+  await page.getByLabel('Last Name').fill(lastName);
+  await page.getByLabel('Company Name (Optional)').fill('BigCommerce');
+  await page.getByLabel('Phone Number (Optional)').fill(faker.phone.number());
+  await page.getByLabel('Address', { exact: true }).fill(faker.location.buildingNumber());
+  await page.getByLabel('City').fill('Natick');
   await page.getByRole('combobox', { name: 'State/Province' }).selectOption('Massachusetts');
   await page.getByRole('textbox', { name: 'Postal Code' }).fill('01762');
   await expect(page.getByRole('button', { name: 'Continue' })).toContainText('Continue');
@@ -31,26 +33,29 @@ async function enterCreditCardDetails(page: Page) {
   await page
     .frameLocator('#bigpaypay-ccNumber iframe')
     .getByLabel('Credit Card Number')
-    .fill('4111 1111 1111 1111', { timeout: actionTimeout });
+    .fill('4111 1111 1111 1111');
   await page.frameLocator('#bigpaypay-ccExpiry iframe').getByPlaceholder('MM / YY').fill('02 / 27');
-  await page.frameLocator('#bigpaypay-ccName iframe').getByLabel('Name on Card').fill(testUser);
+  await page
+    .frameLocator('#bigpaypay-ccName iframe')
+    .getByLabel('Name on Card')
+    .fill(`${firstName} ${lastName}`);
   await page.frameLocator('#bigpaypay-ccCvv iframe').getByLabel('CVV').fill('211');
 }
 
-test.describe(() => {
-  // Typing into many form fields has made this test a little flaky. Retry failing test until we
-  // fix the test
-  test.describe.configure({ retries: 2 });
+test.describe('desktop', () => {
+  test.describe.configure({ mode: 'serial' });
 
   test('Complete checkout as a guest shopper', async ({ page }) => {
     await page.goto('/laundry-detergent/');
-    await expect(page.getByRole('heading', { level: 1, name: sampleProduct })).toBeVisible();
+    await expect(
+      page.getByRole('heading', { level: 1, name: '[Sample] Laundry Detergent' }),
+    ).toBeVisible();
 
     await page.getByRole('button', { name: 'Add to Cart' }).first().click();
     await page.getByRole('link', { name: 'Cart Items 1' }).click();
     await page.getByRole('heading', { level: 1, name: 'Your cart' }).click();
     await page.getByRole('button', { name: 'Proceed to checkout' }).click();
-    await page.getByLabel('Email').fill(faker.internet.email());
+    await page.getByLabel('Email').fill(faker.internet.email({ firstName, lastName }));
     await page.getByRole('button', { name: 'Continue' }).click();
 
     await enterShopperDetails(page);
@@ -63,23 +68,22 @@ test.describe(() => {
     await page.getByRole('button', { name: 'Place Order' }).click();
     await page.waitForLoadState('networkidle');
     await expect(
-      page.getByRole('heading', { name: `Thank you ${testUser}!`, level: 1 }),
+      page.getByRole('heading', { name: `Thank you ${firstName}!`, level: 1 }),
     ).toBeVisible();
   });
 
-  test('Complete checkout as a logged in shopper', async ({ browser }) => {
-    const context = await browser.newContext();
-    const page = await context.newPage();
-
+  test('Complete checkout as a logged in shopper', async ({ page }) => {
     await page.goto('/login/');
     await page.getByLabel('Login').click();
-    await page.getByLabel('Email').fill(process.env.TEST_ACCOUNT_EMAIL || '');
-    await page.getByLabel('Password').fill(process.env.TEST_ACCOUNT_PASSWORD || '');
+    await page.getByLabel('Email').fill(testAccountEmail);
+    await page.getByLabel('Password').fill(testAccountPassword);
     await page.getByRole('button', { name: 'Log in' }).click();
     await page.getByRole('heading', { name: 'My Account' }).waitFor();
 
     await page.goto('/laundry-detergent/');
-    await expect(page.getByRole('heading', { level: 1, name: sampleProduct })).toBeVisible();
+    await expect(
+      page.getByRole('heading', { level: 1, name: '[Sample] Laundry Detergent' }),
+    ).toBeVisible();
     await page.getByRole('button', { name: 'Add to Cart' }).first().click();
     await page.getByRole('link', { name: 'Cart Items 1' }).click();
     await page.getByRole('heading', { level: 1, name: 'Your cart' }).click();
@@ -95,7 +99,39 @@ test.describe(() => {
     await page.getByRole('button', { name: 'Place Order' }).click();
     await page.waitForLoadState('networkidle');
     await expect(
-      page.getByRole('heading', { name: `Thank you ${testUser}!`, level: 1 }),
+      page.getByRole('heading', { name: `Thank you ${firstName}!`, level: 1 }),
+    ).toBeVisible();
+  });
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: { width: 390, height: 844 } });
+  test.describe.configure({ mode: 'serial' });
+
+  test('Complete checkout as a guest shopper', async ({ page }) => {
+    await page.goto('/laundry-detergent/');
+    await expect(
+      page.getByRole('heading', { level: 1, name: '[Sample] Laundry Detergent' }),
+    ).toBeVisible();
+
+    await page.getByRole('button', { name: 'Add to Cart' }).first().click();
+    await page.getByRole('link', { name: 'Cart Items 1' }).click();
+    await page.getByRole('heading', { level: 1, name: 'Your cart' }).click();
+    await page.getByRole('button', { name: 'Proceed to checkout' }).click();
+    await page.getByLabel('Email').fill(faker.internet.email({ firstName, lastName }));
+    await page.getByRole('button', { name: 'Continue' }).click();
+
+    await enterShopperDetails(page);
+
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await page.getByRole('heading', { name: 'Payment', exact: true }).waitFor();
+
+    await enterCreditCardDetails(page);
+
+    await page.getByRole('button', { name: 'Place Order' }).click();
+    await page.waitForLoadState('networkidle');
+    await expect(
+      page.getByRole('heading', { name: `Thank you ${firstName}!`, level: 1 }),
     ).toBeVisible();
   });
 });
diff --git a/core/tests/ui/desktop/e2e/login.spec.ts b/core/tests/ui/desktop/e2e/login.spec.ts
@@ -5,6 +5,8 @@ import { test } from '~/tests/fixtures';
 const testAccountEmail = process.env.TEST_ACCOUNT_EMAIL || '';
 const testAccountPassword = process.env.TEST_ACCOUNT_PASSWORD || '';
 
+test.describe.configure({ mode: 'serial' });
+
 test('Account login and logout', async ({ page }) => {
   await page.goto('/');
 

diff --git a/core/tests/ui/mobile/checkout-experience.spec.ts b/core/tests/ui/mobile/checkout-experience.spec.ts