test: finalizing studio-web component e2e tests

.github/workflows/end-to-end-tests.yml

@@ -49,12 +49,6 @@ jobs:
         run: |
           npx nx build web-component
           npx nx test:once studio-web
-      - name: Playwright for studio-web
-        run: |
-          npx nx build web-compnent
-          npx nx nx run-many --targets=serve-test-data,serve-web-api,serve,serve-fr,serve-es --projects=web-component,studio-web --parallel 6
-          npx nx e2e studio-web
-
       - name: Cypress run for web-component
         uses: cypress-io/github-action@v6
         with:
@@ -83,3 +77,16 @@ jobs:
           npx nx bundle web-component
           git status
           git diff --word-diff=porcelain --word-diff-regex=... --color | perl -ple 's/^(\x1b[^ -+]{0,6})? (.{81,})$/$1 . " " . substr($2, 0, 40) . " [... " . (length($2)-80) . " bytes ...] " . substr($2, -40)/ex'
+
+      - name: Run studio-web in the background
+        run: |
+          npx nx build web-component
+          npx nx run-many --targets=serve,serve-fr,serve-es --projects=web-component,studio-web --parallel 6 &
+
+          # wait for the studio web to be up
+          sleep 100
+          curl --retry 20 --retry-delay 30 --retry-all-errors http://localhost:4200
+      - name: Playwright for studio-web
+        run: |
+          npx playwright install --with-deps chromium
+          npx nx e2e studio-web

.husky/post-install

@@ -1 +1 @@
-npx playwright install
+npx playwright install --with-deps firefox chromium webkit

packages/studio-web/.gitignore

@@ -35,3 +35,4 @@ e2e/*.map
 
 # End of https://www.toptal.com/developers/gitignore/api/angular
 *~
+.nyc_output

packages/studio-web/playwright.config.ts

@@ -12,7 +12,7 @@ import { defineConfig, devices } from "@playwright/test";
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  timeout: 5 * 60 * 1000,
+  timeout: 2 * 60 * 1000,
   testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -36,42 +36,54 @@ export default defineConfig({
   },
 
   /* Configure projects for major browsers */
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
+  /* Only test chromium on CI */
+  projects: process.env.CI
+    ? [
+        {
+          name: "chromium",
+          use: { ...devices["Desktop Chrome"] },
+        },
+        {
+          name: "Mobile Chrome",
+          use: { ...devices["Pixel 5"] },
+        },
+      ]
+    : [
+        {
+          name: "chromium",
+          use: { ...devices["Desktop Chrome"] },
+        },
 
+        {
+          name: "firefox",
+          use: { ...devices["Desktop Firefox"] },
+        },
+        /* We do not have full webkit support
     {
       name: "webkit",
       use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
+        {
+          name: "Mobile Chrome",
+          use: { ...devices["Pixel 5"] },
+        },
+        /*{
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 12"] },
+    },
 
     /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+        // },
+      ],
 
   /* Run your local dev server before starting the tests */
   // webServer: {

packages/studio-web/tests/studio-web.spec.ts

@@ -33,7 +33,7 @@ const makeAReadAlong = async (page: Page) => {
     await page.getByTestId("next-step").click({ force: true });
 
     //wait for edit page to load
-    await expect(page.getByTestId("ra-header")).toBeVisible();
+    await expect(page.getByTestId("ra-header")).toBeVisible({ timeout: 15000 });
     await expect(page.getByTestId("ra-header")).toBeEditable();
     //edit the headers
 
@@ -46,36 +46,36 @@ const makeAReadAlong = async (page: Page) => {
 
     await page
       .getByTestId("ra-subheader")
-      .fill("by me", { force: true, timeout: 200 });
+      .fill("by me", { force: true, timeout: 500 });
 
     //add translations
 
     await page
       .locator("#t0b0d0p0s0")
       .getByRole("button")
-      .click({ force: true, timeout: 250 });
+      .click({ force: true, timeout: 550 });
 
     await page
       .locator("#t0b0d0p0s1")
       .getByRole("button")
-      .click({ force: true, timeout: 250 });
+      .click({ force: true, timeout: 550 });
     await page
       .locator("#t0b0d0p1s0")
       .getByRole("button")
-      .click({ force: true, timeout: 250 });
+      .click({ force: true, timeout: 550 });
     //update translations
 
     await page
       .locator("#t0b0d0p0s0translation")
-      .fill("Ceci est un test.", { force: true, timeout: 250 });
+      .fill("Ceci est un test.", { force: true, timeout: 550 });
 
     await page
       .locator("#t0b0d0p0s1translation")
-      .fill("Phrase.", { force: true, timeout: 250 });
+      .fill("Phrase.", { force: true, timeout: 550 });
 
     await page
       .locator("#t0b0d0p1s0translation")
-      .fill("Paragraphe.", { force: true, timeout: 250 });
+      .fill("Paragraphe.", { force: true, timeout: 550 });
 
     //upload a photo to page 1
     let fileChooserPromise = page.waitForEvent("filechooser");
@@ -139,7 +139,7 @@ test.describe("test studio UI & UX", () => {
       .click();
     await expect(
       page.getByRole("button", { name: "Next (overwrites your data)" }),
-    ).toHaveCount(0);
+    ).toHaveCount(0, { timeout: 35000 });
     await page.getByRole("button", { name: "Next" }).click();
     await page.getByRole("button", { name: "Next" }).click();
     await page.getByRole("button", { name: "Next" }).click();