Example: Argos CI, Playwright, Currents Orchestration

.github/test-basic-pwc-staging.yml

@@ -10,16 +10,16 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        # run 3 copies of the current job in parallel
-        shard: [1, 2, 3]
+        # run multiple copies of the current job in parallel
+        shard: [1, 2, 3, 4, 5]
     name: "PW tests"
     timeout-minutes: 60
     runs-on: ubuntu-22.04
     container: mcr.microsoft.com/playwright:latest
     env:
       TESTGROUP: basic
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 
@@ -28,24 +28,31 @@ jobs:
           echo "$GITHUB_WORKSPACE"
           git config --global --add safe.directory "$GITHUB_WORKSPACE"
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: "18.x"
+          node-version: "20.x"
 
       - name: Install dependencies
         run: |
           npm ci
-          npx playwright install msedge
           npx playwright install chrome
-          npx playwright install
 
       - name: Run Basic Tests
-        continue-on-error: false
+        continue-on-error: true
         working-directory: ${{ env.TESTGROUP }}
         env:
-          DEBUG: currents*
           CURRENTS_API_URL: https://cy-staging.currents.dev
-          CURRENTS_PROJECT_ID: ALbKIA
+          CURRENTS_PROJECT_ID: dJeKhI
           CURRENTS_RECORD_KEY: ${{ secrets.CURRENTS_RECORD_KEY_STAGING }}
         run: |
-          npx pwc --shard=${{ matrix.shard }}/${{ strategy.job-total }} --ci-build-id "${{ github.repository }}-${{ github.run_id }}-${{ github.run_attempt }}"
+          npx pwc --shard=${{ matrix.shard }}/${{ strategy.job-total }} --ci-build-id "${{ github.repository }}-${{ github.run_id }}-${{ github.run_attempt }}" --grep @basic
+
+      - name: Run Non-Basic Tests
+        continue-on-error: true
+        working-directory: ${{ env.TESTGROUP }}
+        env:
+          CURRENTS_API_URL: https://cy-staging.currents.dev
+          CURRENTS_PROJECT_ID: dJeKhI
+          CURRENTS_RECORD_KEY: ${{ secrets.CURRENTS_RECORD_KEY_STAGING }}
+        run: |
+          npx pwc --shard=${{ matrix.shard }}/${{ strategy.job-total }} --ci-build-id "${{ github.repository }}-${{ github.run_id }}-${{ github.run_attempt }}" --grep-invert @basic

.github/workflows/test-or8n.yml → .github/test-or8n.yml

@@ -41,6 +41,7 @@ jobs:
         continue-on-error: false
         working-directory: ./basic
         env:
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
           CURRENTS_PROJECT_ID: bnsqNa
           CURRENTS_RECORD_KEY: ${{ secrets.CURRENTS_RECORD_KEY }}
           CURRENTS_CI_BUILD_ID: reporter-${{ github.repository }}-${{ github.run_id }}-${{ github.run_attempt }}

.github/workflows/argos-example.yml

@@ -0,0 +1,47 @@
+name: demo.playwright.pwc-p.argos
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+jobs:
+  basicTests:
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3]
+    name: "PW tests"
+    timeout-minutes: 60
+    runs-on: ubuntu-22.04
+    container: mcr.microsoft.com/playwright:latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      # https://github.com/actions/runner-images/issues/6775
+      - run: |
+          echo "$GITHUB_WORKSPACE"
+          git config --global --add safe.directory "$GITHUB_WORKSPACE"
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+
+      - name: Install dependencies
+        run: |
+          npm ci
+          npx playwright install chrome
+
+      - name: Orchestrated PW + Argos
+        working-directory: ./argos
+        env:
+          ARGOS_PARALLEL: 1
+          ARGOS_PARALLEL_TOTAL: -1
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+          CURRENTS_PROJECT_ID: bnsqNa
+          CURRENTS_RECORD_KEY: ${{ secrets.CURRENTS_RECORD_KEY }}
+        run: |
+          npx pwc-p

argos/0-argos.spec.ts

@@ -0,0 +1,10 @@
+import { argosScreenshot } from "@argos-ci/playwright";
+import { test } from "@playwright/test";
+
+test("argos - 0", async ({ page }) => {
+  await page.goto("https://example.com");
+  await page.addStyleTag({
+    content: "h1 { margin-top: 30px; }",
+  });
+  await argosScreenshot(page, "homepage");
+});

argos/1-argos.spec.ts

@@ -0,0 +1,10 @@
+import { argosScreenshot } from "@argos-ci/playwright";
+import { test } from "@playwright/test";
+
+test("argos - 1", async ({ page }) => {
+  await page.goto("https://example.com");
+  await page.addStyleTag({
+    content: "h1 { margin-top: 10px; }",
+  });
+  await argosScreenshot(page, "homepage");
+});

argos/2-argos.spec.ts

@@ -0,0 +1,12 @@
+import { argosScreenshot } from "@argos-ci/playwright";
+import { test } from "@playwright/test";
+
+test("argos - 2", async ({ page }) => {
+  await page.goto("https://example.com");
+
+  await page.addStyleTag({
+    content: "h1 { margin-top: 40px; }",
+  });
+
+  await argosScreenshot(page, "homepage");
+});

argos/currents.config.ts

@@ -0,0 +1,33 @@
+import type { CurrentsConfig, OrchestrationStatus } from "@currents/playwright";
+import { $ } from "execa";
+
+function assertEnvVariable(name: string) {
+  if (!process.env[name]) {
+    throw new Error(`Missing environment variable ${name}`);
+  }
+  return process.env[name];
+}
+
+async function onFinish(status: OrchestrationStatus) {
+  if (status.specs.completed === status.specs.overall) {
+    try {
+      const finalize = await $`npx argos finalize`;
+      console.log(finalize.stderr);
+    } catch (e) {
+      console.error(e);
+    }
+    return;
+  }
+}
+
+const config: CurrentsConfig = {
+  recordKey: assertEnvVariable("CURRENTS_RECORD_KEY"),
+  projectId: assertEnvVariable("CURRENTS_PROJECT_ID"),
+  ciBuildId: `${process.env.GITHUB_RUN_ID}-${process.env.GITHUB_RUN_ATTEMPT}`,
+  orchestration: {
+    skipReporterInjection: true,
+    onFinish,
+  },
+};
+
+export default config;

argos/playwright.config.ts

@@ -0,0 +1,47 @@
+import { currentsReporter } from "@currents/playwright";
+import { devices, PlaywrightTestConfig } from "@playwright/test";
+
+const config: PlaywrightTestConfig = {
+  timeout: 10 * 1000,
+  fullyParallel: true,
+
+  expect: {
+    timeout: 5000,
+  },
+
+  forbidOnly: !!process.env.GITHUB_ACTIONS,
+  retries: 0,
+  workers: 1,
+
+  reporter: [
+    currentsReporter(),
+    [
+      // See https://argos-ci.com/docs/quickstart/playwright
+      "@argos-ci/playwright/reporter",
+      {
+        uploadToArgos: true,
+      },
+    ],
+  ],
+
+  use: {
+    actionTimeout: 0,
+    trace: "on",
+    video: "on",
+    screenshot: "on",
+  },
+
+  projects: [
+    {
+      name: "chrome",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  outputDir: "test-results/",
+};
+
+export default config;

basic/2-actions.spec.ts

@@ -12,7 +12,7 @@ test.beforeEach(async ({ page }) => {
  * by the completed items to ensure that the item is not visible anymore.
  * @see https://playwright.dev/docs/api/class-locator
  */
-test("basic interaction @tagA", async ({ page }, testInfo) => {
+test("basic interaction @basic", async ({ page }, testInfo) => {
   const inputBox = page.locator("input.new-todo");
   const todoList = page.locator(".todo-list");
 
@@ -33,7 +33,7 @@ test("basic interaction @tagA", async ({ page }, testInfo) => {
  * Playwright supports different selector engines which you can combine with '>>'.
  * @see https://playwright.dev/docs/selectors
  */
-test("element selectors @tagA", async ({ page }) => {
+test("element selectors @basic", async ({ page }) => {
   // When no selector engine is specified, Playwright will use the css selector engine.
   await page.type(".header input", "Learn Playwright");
   // So the selector above is the same as the following:

basic/7-argos.spec.ts

@@ -0,0 +1,7 @@
+import { argosScreenshot } from "@argos-ci/playwright";
+import { test } from "@playwright/test";
+
+test("basic test @basic", async ({ page }) => {
+  await page.goto("https://example.com");
+  await argosScreenshot(page, "homepage");
+});

basic/playwright.config.argos.ts

@@ -0,0 +1,17 @@
+import { currentsReporter } from "@currents/playwright";
+import config from "./pw.config.shared";
+export default {
+  ...config,
+  reporter: [
+    currentsReporter(),
+    [
+      "@argos-ci/playwright/reporter",
+      {
+        // Upload to Argos on CI only.
+        uploadToArgos: true,
+        // Set your Argos token (required if not using GitHub Actions).
+        token: process.env.ARGOS_TOKEN,
+      },
+    ],
+  ],
+};

basic/pw.config.shared.ts

@@ -3,6 +3,8 @@ import { devices, PlaywrightTestConfig } from "@playwright/test";
 const config: PlaywrightTestConfig = {
   timeout: 10 * 1000,
 
+  fullyParallel: true,
+
   expect: {
     timeout: 5000,
   },
@@ -33,13 +35,6 @@ const config: PlaywrightTestConfig = {
         ...devices["Desktop Chrome"],
       },
     },
-    {
-      name: "b",
-      retries: 2,
-      use: {
-        ...devices["Desktop Chrome"],
-      },
-    },
   ],
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */