test(e2e): trial Playwright with the render-regression spec

.github/workflows/pr-render-check.yml

@@ -142,3 +142,56 @@ jobs:
             --spec "cypress/e2e/content/render-regression.cy.js" \
             --spec "cypress/e2e/content/canonical.cy.js" \
             --no-mapping
+
+  playwright-render:
+    name: Playwright render-regression spec (trial)
+    runs-on: ubuntu-latest
+    # Runs beside cypress-render during the Playwright trial so both
+    # frameworks check the same pages on the same PRs.
+    if: |
+      github.event_name == 'pull_request' &&
+      (contains(github.event.pull_request.labels.*.name, 'render-regression') ||
+       github.event.pull_request.draft == false)
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1  # v7.0.1
+        with:
+          fetch-depth: 0
+
+      - name: Detect layout/asset changes
+        id: detect
+        run: |
+          CHANGED=$(git diff --name-only \
+            "${{ github.event.pull_request.base.sha }}...${{ github.event.pull_request.head.sha }}")
+
+          if echo "$CHANGED" | grep -qE '^(layouts/|assets/|playwright/|playwright\.config\.js$|\.github/workflows/pr-render-check\.yml$)'; then
+            echo "should-run=true" >> $GITHUB_OUTPUT
+          else
+            echo "should-run=false" >> $GITHUB_OUTPUT
+            echo "ℹ️  No layout/asset/Playwright file changed — skipping Playwright"
+          fi
+
+      - name: Setup docs environment
+        if: steps.detect.outputs.should-run == 'true'
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+        uses: ./.github/actions/setup-docs-env
+
+      - name: Install Chromium for Playwright
+        if: steps.detect.outputs.should-run == 'true'
+        run: npx playwright install --with-deps chromium
+
+      - name: Run render-regression and custom-timestamps specs
+        if: steps.detect.outputs.should-run == 'true'
+        run: |
+          yarn test:e2e:playwright \
+            playwright/e2e/render-regression.spec.js \
+            playwright/e2e/custom-timestamps.spec.js
+
+      - name: Upload Playwright traces
+        if: failure() && steps.detect.outputs.should-run == 'true'
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a  # v7.0.1
+        with:
+          name: playwright-traces
+          path: test-results/
+          retention-days: 7

.gitignore

@@ -40,6 +40,8 @@ package-lock.json
 /cypress/downloads/*
 /cypress/screenshots/*
 /cypress/videos/*
+/test-results/
+/playwright-report/
 .lycheecache
 test-results.xml
 /influxdb3cli-build-scripts/content

package.json

@@ -31,6 +31,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@evilmartians/lefthook": "^1.7.1",
+    "@playwright/test": "1.63.0",
     "@types/js-yaml": "^4.0.9",
     "autoprefixer": ">=10.2.5",
     "cypress": "^15.17.0",
@@ -144,6 +145,7 @@
     "test:lint-prose": "node --test scripts/ci/__tests__/prose-lint.test.mjs",
     "lint-codeblocks:pretty": "scripts/ci/lint-codeblocks-pretty.sh",
     "test:e2e": "node cypress/support/run-e2e-specs.js",
+    "test:e2e:playwright": "playwright test --project=chromium",
     "test:render-regression": "node cypress/support/run-e2e-specs.js --spec \"cypress/e2e/content/render-regression.cy.js\" --no-mapping",
     "test:render-artifacts": ".ci/scripts/check-render-artifacts.sh public",
     "test:no-test-fixtures": ".ci/scripts/check-no-test-fixtures.sh public",

playwright.config.js

@@ -0,0 +1,40 @@
+import process from 'node:process';
+import { defineConfig, devices } from '@playwright/test';
+
+const hugoPort = 1315;
+const hugoServerCommand = [
+  'npx hugo server --environment testing',
+  `--port ${hugoPort} --noHTTPCache --disableFastRender`,
+].join(' ');
+const chromiumExecutablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
+
+export default defineConfig({
+  testDir: 'playwright/e2e',
+  fullyParallel: true,
+  forbidOnly: Boolean(process.env.CI),
+  reporter: process.env.CI ? [['github'], ['list']] : 'list',
+  expect: { timeout: 10000 },
+  use: {
+    baseURL: `http://localhost:${hugoPort}`,
+    trace: 'retain-on-failure',
+  },
+  webServer: {
+    command: hugoServerCommand,
+    url: `http://localhost:${hugoPort}/`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 300000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: chromiumExecutablePath
+          ? { executablePath: chromiumExecutablePath }
+          : {},
+      },
+    },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+  ],
+});

playwright/e2e/custom-timestamps.spec.js

@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test';
+
+const serverlessWritePage = '/influxdb3/cloud-serverless/get-started/write/';
+const preferencesKey = 'influxdata_docs_preferences';
+
+function firstSampleSeconds(date) {
+  return String(Date.parse(`${date}T08:00:00Z`) / 1000);
+}
+
+async function selectSampleDate(page, date) {
+  await page.locator('.custom-time-trigger a[data-action="open"]').click();
+  await page
+    .locator('#custom-date-selector')
+    .evaluate((picker, selected) => picker.datepicker.setDate(selected), date);
+  await page.locator('#submit-custom-date').click();
+}
+
+async function savedSampleDate(page) {
+  return page.evaluate(
+    (key) =>
+      JSON.parse(localStorage.getItem(key) || '{}').sample_get_started_date,
+    preferencesKey
+  );
+}
+
+async function expectSampleDate(page, date) {
+  const timeRange = page.locator('span.custom-timestamps').first();
+  await expect(timeRange).toContainText(`${date}T08:00:00Z`);
+  await expect(timeRange).toContainText(`${date}T20:00:00Z`);
+  expect(await savedSampleDate(page)).toBe(date);
+}
+
+test.describe('Custom timestamps date picker', () => {
+  test.describe('east of UTC', () => {
+    test.use({ timezoneId: 'Asia/Tokyo' });
+
+    test('uses the selected date (#6424)', async ({ page }) => {
+      await page.goto(serverlessWritePage);
+      await selectSampleDate(page, '2025-03-15');
+      await expectSampleDate(page, '2025-03-15');
+    });
+
+    test("defaults to the reader's local yesterday", async ({ page }) => {
+      await page.clock.setFixedTime(new Date('2025-03-14T21:00:00Z'));
+      await page.goto(serverlessWritePage);
+      await expectSampleDate(page, '2025-03-14');
+    });
+  });
+
+  test.describe('west of UTC', () => {
+    test.use({ timezoneId: 'America/Los_Angeles' });
+
+    test('uses the selected date', async ({ page }) => {
+      await page.goto(serverlessWritePage);
+      await selectSampleDate(page, '2025-03-15');
+      await expectSampleDate(page, '2025-03-15');
+    });
+  });
+
+  test.describe('UTC', () => {
+    test.use({ timezoneId: 'UTC' });
+
+    test('rewrites every line protocol sample to the selected date (#6424)', async ({
+      page,
+    }) => {
+      await page.goto(serverlessWritePage);
+      await selectSampleDate(page, '2025-03-15');
+
+      const sampleBlocks = page
+        .locator('.custom-timestamps pre')
+        .filter({ hasText: 'home,room=' });
+      await expect(sampleBlocks.first()).toContainText(
+        firstSampleSeconds('2025-03-15')
+      );
+      const sampleTexts = await sampleBlocks.allTextContents();
+      expect(sampleTexts.length).toBeGreaterThan(0);
+      expect(
+        sampleTexts.filter(
+          (text) =>
+            !text.includes(firstSampleSeconds('2025-03-15')) ||
+            text.includes(firstSampleSeconds('2022-01-01'))
+        )
+      ).toEqual([]);
+    });
+  });
+});