Merge pull request #1891 from mashehu/add-playwright-testing

Add playwright testing

.github/workflows/build-json-files-and-md-cache.yml

@@ -23,9 +23,23 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'npm'
-      - run: npm install
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
 
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: Install dependencies
+        run: npm ci
       - name: create pipeline.json
         run: npm run build-pipeline-json
         env:

.github/workflows/playwright.yml

@@ -0,0 +1,53 @@
+name: Playwright Tests
+on:
+  pull_request:
+
+# Cancel if a newer run is started
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  run_test:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Waiting for 200 from the Netlify Preview
+        uses: jakepartusch/[email protected]
+        id: waitFor200
+        with:
+          site_name: 'nf-core'
+          max_timeout: 600 # 10 Minutes
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: 'https://deploy-preview-${{github.event.pull_request.number}}--nf-core.netlify.app'
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 1

.gitignore

@@ -24,3 +24,5 @@ pnpm-debug.log*
 # Local Netlify folder
 .netlify
 src/content/pipelines
+playwright-report
+test-results

package.json

@@ -27,13 +27,13 @@
         "@astrojs/sitemap": "^2.0.2",
         "@astrojs/svelte": "^3.1.1",
         "@astropub/md": "^0.2.0",
-        "@aws-sdk/client-s3": "^3.395.0",
-        "@aws-sdk/credential-provider-node": "^3.395.0",
+        "@aws-sdk/client-s3": "^3.398.0",
+        "@aws-sdk/credential-provider-node": "^3.398.0",
         "@fontsource-variable/inter": "^5.0.8",
         "@fontsource-variable/maven-pro": "^5.0.8",
         "@fontsource-variable/open-sans": "^5.0.9",
         "@nanostores/persistent": "^0.9.1",
-        "astro": "^2.10.12",
+        "astro": "^2.10.13",
         "astro-icon": "^0.8.1",
         "bootstrap": "^5.3.1",
         "bootstrap-print-css": "^1.0.1",
@@ -83,6 +83,7 @@
         "youtube-player": "^5.6.0"
     },
     "devDependencies": {
+        "@playwright/test": "^1.37.1",
         "@rollup/plugin-yaml": "^4.1.1",
         "@types/leaflet": "^1.9.3",
         "fontaine": "^0.4.0",

playwright.config.ts

@@ -0,0 +1,65 @@
+import { defineConfig, devices } from '@playwright/test';
+
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './tests',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] },
+        },
+
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+
+        /* Test against mobile viewports. */
+        // {
+        //     name: 'Mobile Safari',
+        //     use: { ...devices['iPhone 12'] },
+        // },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    // webServer: {
+    //     command: 'npm run dev',
+    //     url: 'http://localhost:3000/',
+    //     timeout: 120 * 1000,
+    //     reuseExistingServer: !process.env.CI,
+    // },
+});

tests/nf-core.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+
+test.describe.configure({ mode: 'parallel' });
+// @ts-check
+
+test('meta is correct', async ({ page }) => {
+    await page.goto('/');
+
+    await expect.soft(page).toHaveTitle('nf-core');
+});
+
+test('pipeline redirect works for /$pipeliname', async ({ page }) => {
+    await page.goto('/rnaseq');
+    await expect.soft(page).toHaveTitle('rnaseq: Introduction');
+    // check if markdown is rendered correctly
+    await expect.soft(page.locator('.markdown-content')).toContainText('nf-core/rnaseq is a bioinformatics pipeline');
+    // check if results redirect works
+    await page.goto('/rnaseq/results/');
+
+    await expect.soft(page.getByRole('link', { name: 'Results' })).toHaveClass('nav-link active');
+    // check if SSR works correctly for results
+    await page.locator('.list-group-item').nth(1).click();
+    await expect.soft(page.locator('.file-browser')).toContainText('fastqc');
+});
+
+test('random pipeline page', async ({ page }) => {
+    // check if CTA button works and random (=the pipeline with the newest release) pipeline page is loaded
+    await page.goto('/');
+    await page.getByRole('link', { name: 'View Pipelines' }).click();
+    await page.locator('.card').locator('a').first().click();
+    await expect.soft(page.locator('.markdown-content')).toContainText('Citations');
+});