feat(default-theme): test 2e2 with playwright (#1779)

.github/workflows/e2e-test.yml

@@ -1,4 +1,4 @@
-name: E2E Cypress tests
+name: E2E Playwright tests
 env:
  LABEL_RUNNING: e2e-running
  LABEL_SUCCESS: e2e-passed
@@ -29,19 +29,19 @@ jobs:
  uses: actions/cache@v2
  id: step-cache-node-modules
  env:
- cache-name: cache-cypress-node-modules-test
+ cache-name: cache-node-modules-test
  with:
  path: |
  node_modules
- /home/runner/.cache/Cypress
+ packages/*/node_modules
  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('yarn.lock') }}
  - name: Install dependencies
  if: steps.step-cache-node-modules.outputs.cache-hit != 'true'
  run: |
  yarn --frozen-lockfile
 
  test:
- name: Cypress tests
+ name: Playwright tests
  needs: init
  if: github.event.label.name == 'e2e-running' || github.event_name == 'push'
  runs-on: ubuntu-latest
@@ -68,24 +68,30 @@ jobs:
  type: remove
  - name: Cache node_modules
  uses: actions/cache@v2
+ id: step-cache-node-modules
  env:
- cache-name: cache-cypress-node-modules-test
+ cache-name: cache-node-modules-test
  with:
  path: |
  node_modules
- /home/runner/.cache/Cypress
+ packages/*/node_modules
  key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('yarn.lock') }}
  - name: get preview url
  id: get-preview-url
  uses: patzick/action-get-comment-url@v1
  with:
  token: ${{ secrets.GITHUB_TOKEN }}
  platform: StorefrontCloud
- - name: yarn test e2e
+ - name: Set the env value
+ id: set-env-value
+ run: |
+ echo "BASE_URL=${{ github.event.inputs.page_url || steps.get-preview-url.outputs.comment_url }}" >> $GITHUB_ENV
+ - name: yarn test theme e2e
  run: |
- yarn cypress run --config baseUrl=${{ github.event.inputs.page_url || steps.get-preview-url.outputs.comment_url }}
+ npx playwright install
+ yarn test:theme
  env:
- CI: true
+ BASE_URL: ${{ github.event.inputs.page_url || steps.get-preview-url.outputs.comment_url }}
  # Take care of labels
  - name: remove running label
  if: failure() || success()

package.json

@@ -24,7 +24,7 @@
  "lint": "prettier --write --parser typescript \"packages/**/*.ts\"",
  "test": "NODE_OPTIONS=--unhandled-rejections=warn jest --runInBand",
  "test:e2e": "jest --e2e=true --runInBand",
- "test:cypress": "cypress run",
+ "test:theme": "cd ./packages/default-theme && yarn test:e2e",
  "test:coverage": "yarn test --coverage",
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs",

packages/default-theme/__e2e__/helpers/testHelpers.ts

@@ -0,0 +1,48 @@
+import faker from "faker";
+import { Page, expect } from "@playwright/test";
+
+export async function fillRegistrationForm({ page }: { page: Page }) {
+ await expect(page.locator("#Salutation")).toContainText("Not specified");
+
+ // Fill [data-testid="registration-first-name-input"] [data-testid="registration-first-name-input"]
+ await page.fill(
+ '[data-testid="registration-first-name-input"] [data-testid="registration-first-name-input"]',
+ faker.name.firstName()
+ );
+
+ // Fill [data-testid="registration-last-name-input"] [data-testid="registration-last-name-input"]
+ await page.fill(
+ '[data-testid="registration-last-name-input"] [data-testid="registration-last-name-input"]',
+ faker.name.lastName()
+ );
+
+ // Click [data-testid="guest-registration-checkbox"] div
+ await page.click('[data-testid="guest-registration-checkbox"] div');
+
+ // Fill [data-testid="registration-email-input"] [data-testid="registration-email-input"]
+ await page.fill(
+ '[data-testid="registration-email-input"] [data-testid="registration-email-input"]',
+ faker.internet.email()
+ );
+
+ // Fill [data-testid="registration-street-input"] [data-testid="registration-street-input"]
+ await page.fill(
+ '[data-testid="registration-street-input"] [data-testid="registration-street-input"]',
+ faker.address.streetName()
+ );
+
+ // Fill [data-testid="registration-zipcode-input"] [data-testid="registration-zipcode-input"]
+ await page.fill(
+ '[data-testid="registration-zipcode-input"] [data-testid="registration-zipcode-input"]',
+ faker.address.zipCode()
+ );
+
+ // Fill [data-testid="registration-city-input"] [data-testid="registration-city-input"]
+ await page.fill(
+ '[data-testid="registration-city-input"] [data-testid="registration-city-input"]',
+ faker.address.cityName()
+ );
+
+ // Click [data-testid="register-button"]
+ await page.click('[data-testid="register-button"]');
+}

packages/default-theme/__e2e__/playwright.config.ts

@@ -0,0 +1,12 @@
+import { PlaywrightTestConfig } from "@playwright/test";
+
+const baseURL = process.env.BASE_URL || "http://localhost:3000";
+console.error("Test for base url: ", baseURL);
+const config: PlaywrightTestConfig = {
+ use: {
+ baseURL,
+ },
+ timeout: 120000,
+ retries: 2,
+};
+export default config;

packages/default-theme/__e2e__/specs/desktopHappyPathExistingUser.spec.ts

@@ -0,0 +1,60 @@
+import { test } from "@playwright/test";
+
+test.use({
+ viewport: {
+ width: 1920,
+ height: 1080,
+ },
+});
+
+test("[DESKTOP] Happy path logged in user", async ({ page, baseURL }) => {
+ await page.goto('/');
+
+ await page.click('[data-testid="login-icon"]');
+ // Fill [data-testid="email-input"] [data-testid="email-input"]
+ await page.fill(
+ '[data-testid="email-input"] [data-testid="email-input"]',
+ "1d7b9fef36a34367ad02993594db3fc9rlegros@example.com"
+ );
+ // Fill [data-testid="password-input"] [data-testid="password-input"]
+ await page.fill(
+ '[data-testid="password-input"] [data-testid="password-input"]',
+ "shopware"
+ );
+ // Click [data-testid="submit-login-button"]
+ await page.click('[data-testid="submit-login-button"]');
+
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="top-navigation"] a'),
+ ]);
+
+ await Promise.all([
+ page.hover('[data-testid="product-card"]'),
+ page.click('[data-testid="product-card"] .sf-product-card__add-button'),
+ ]);
+
+ await page.click('[data-testid="cart-icon"]');
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="goToCheckout-button"]'),
+ ]);
+
+ await page.click(
+ '[data-testid="checkout-payment-method-Cash-on-delivery"] div'
+ );
+ await page.click(
+ '[data-testid="checkout-payment-method-Cash-on-delivery"] .is-active'
+ );
+
+ // Click [data-testid="termsAgreementCheckbox"] div
+ await page.click('[data-testid="termsAgreementCheckbox"] div');
+
+ // Click [data-testid="place-my-order"]
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="place-my-order"]'),
+ ]);
+
+ await page.click('h2:has-text("Thank you")');
+});

packages/default-theme/__e2e__/specs/desktopHappyPathGuestUser.spec.ts

@@ -0,0 +1,76 @@
+import { test } from "@playwright/test";
+import { fillRegistrationForm } from "../helpers/testHelpers";
+
+test.use({
+ viewport: {
+ width: 1920,
+ height: 1080,
+ },
+});
+
+test("[DESKTOP] Happy path guest user", async ({ page }) => {
+ // Go to /
+ await page.goto("/");
+
+ // Click [data-testid="search-bar"]
+ await page.click('[data-testid="search-bar"]');
+
+ // Fill [data-testid="search-bar"]
+ await page.fill('[data-testid="search-bar"]', "aaa");
+
+ // Click [data-testid="quicksearch-result"]
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="quicksearch-result"]'),
+ ]);
+
+ // Click [data-testid="button-addToCart"]
+ await page.click('[data-testid="button-addToCart"]');
+
+ // Click [data-testid="cart-icon"]
+ await page.click('[data-testid="cart-icon"]');
+
+ // Click text=Total items 1
+ await page.click("text=Total items 1");
+
+ // Click [data-testid="goToCheckout-button"]
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="goToCheckout-button"]'),
+ ]);
+
+ await fillRegistrationForm({ page });
+
+ // Click text=Shipping methods
+ await page.click("text=Shipping methods");
+
+ await page.click(
+ '[data-testid="checkout-payment-method-Cash-on-delivery"] div'
+ );
+ await page.click(
+ '[data-testid="checkout-payment-method-Cash-on-delivery"] .is-active'
+ );
+
+ // Check if we can submit order without agreeing to Terms
+ // Click [data-testid="place-my-order"]
+ await page.click('[data-testid="place-my-order"]');
+ // Click text=This field is required
+ await page.click("text=This field is required");
+ // Click [data-testid="termsAgreementCheckbox"] div
+ await page.click('[data-testid="termsAgreementCheckbox"] div');
+
+ // Click [data-testid="place-my-order"]
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="place-my-order"]'),
+ ]);
+
+ // Click h2:has-text("Thank you")
+ await page.click('h2:has-text("Thank you")');
+
+ // Click text=Payment method Cash on delivery
+ await page.click("text=Payment method Cash on delivery");
+
+ // Close page
+ await page.close();
+});

packages/default-theme/__e2e__/specs/mobileHappyPathGuestUser.spec.ts

@@ -0,0 +1,74 @@
+import { test } from "@playwright/test";
+import { fillRegistrationForm } from "../helpers/testHelpers";
+
+test.use({
+ viewport: {
+ width: 320,
+ height: 480,
+ },
+});
+
+test("[MOBILE] Happy path guest user", async ({ page }) => {
+ // Go to /
+ await page.goto("/");
+
+ // Click [data-testid="search-bar"]
+ await page.click('[data-testid="search-bar"]');
+
+ // Fill [data-testid="search-bar"]
+ await page.fill('[data-testid="search-bar"]', "aaa");
+
+ // Press Enter
+ await Promise.all([
+ page.waitForNavigation(),
+ page.press('[data-testid="search-bar"]', "Enter"),
+ ]);
+
+ // Click img[alt="Levis X-star Wars Galaxy Far Away Pullover Hoodie Junior"]
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="product-card"] img'),
+ ]);
+
+ // Click [data-testid="button-addToCart"]
+ await page.click('[data-testid="button-addToCart"]');
+
+ // Click [aria-label="Go to Cart"]
+ await page.click('[aria-label="Go to Cart"]');
+
+ // Click [data-testid="goToCheckout-button"]
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="goToCheckout-button"]'),
+ ]);
+
+ await fillRegistrationForm({ page });
+
+ // Click text=Shipping methods
+ await page.click("text=Shipping methods");
+
+ await page.click(
+ '[data-testid="checkout-payment-method-Cash-on-delivery"] div'
+ );
+ await page.click(
+ '[data-testid="checkout-payment-method-Cash-on-delivery"] .is-active'
+ );
+
+ // Click [data-testid="termsAgreementCheckbox"] div
+ await page.click('[data-testid="termsAgreementCheckbox"] div');
+
+ // Click [data-testid="place-my-order"]
+ await Promise.all([
+ page.waitForNavigation(),
+ page.click('[data-testid="place-my-order"]'),
+ ]);
+
+ // Click h2:has-text("Thank you")
+ await page.click('h2:has-text("Thank you")');
+
+ // Click text=Payment method Cash on delivery
+ await page.click("text=Payment method Cash on delivery");
+
+ // Close page
+ await page.close();
+});