test(core): fix playwright tests (#1622)

core/playwright.config.ts

@@ -24,7 +24,14 @@ export default defineConfig({
   projects: [
     {
       name: 'tests-chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          // When redirected to checkout, BigCommerce blocks preflight requests from a HeadlessChrome user agent.
+          // We need to disable web security to allow the preflight request to go through.
+          args: ['--disable-web-security'],
+        },
+      },
     },
   ],
 });

core/tests/ui/e2e/cart.spec.ts

@@ -1,4 +1,4 @@
-import { expect, Page, test } from '~/tests/fixtures';
+import { expect, test } from '~/tests/fixtures';
 
 const sampleProduct = '[Sample] Able Brewing System';
 

core/tests/ui/e2e/checkout.spec.ts

@@ -82,7 +82,7 @@ test.describe('desktop', () => {
     ).toBeVisible();
   });
 
-  test('Complete checkout as a logged in shopper', async ({ page, isMobile, account }) => {
+  test('Complete checkout as a logged in shopper', async ({ page, account }) => {
     const customer = await account.create();
 
     await customer.login();
@@ -97,17 +97,22 @@ test.describe('desktop', () => {
     await page.getByRole('heading', { level: 1, name: 'Your cart' }).click();
     await page.getByRole('button', { name: 'Proceed to checkout' }).click();
 
-    await waitForShippingForm(page, isMobile);
+    await page.waitForRequest('**/internalapi/v1/store/countries');
+    await page
+      .locator('.checkout-step--shipping .checkout-view-content[aria-busy="false"]')
+      .waitFor();
 
     await page.getByText(customer.email).isVisible();
+
+    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 }),
+      page.getByRole('heading', { name: `Thank you ${customer.firstName}!`, level: 1 }),
     ).toBeVisible();
   });
 });