docs-as-tests (#22283)

## Description
- Adds UI tests and GitHub actions workflow

## Related issues or tickets
[ENGDOCS-2284
](https://docker.atlassian.net/browse/ENGDOCS-2284)

## Reviews
- [ ] Technical review

Author: sarahsanders-docker

.github/workflows/docs-tests.yml

@@ -0,0 +1,40 @@
+name: Docs UI Tests
+
+on:
+  schedule:
+    - cron: '0 15 * * *'  # Runs daily at 10:00 AM EST / 15:00 UTC
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Set environment variables from GitHub Secrets
+        run: |
+          echo "ENV_APP_USERNAME=${{ secrets.ENV_APP_USERNAME }}" >> $GITHUB_ENV
+          echo "ENV_APP_PASSWORD=${{ secrets.ENV_APP_PASSWORD }}" >> $GITHUB_ENV
+
+      - name: Run Playwright tests
+        run: npx playwright test --trace on
+
+      - name: Send Slack notification on failure
+        if: failure()
+        uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          fields: repo, action, workflow
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.DOCS_TESTS_SLACK_WEBHOOK }}
+
+      - name: Cleanup app-auth.json
+        if: always()
+        run: rm -f ${{ github.workspace }}/app-auth.json

docs-tests/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.env

docs-tests/Dockerfile

@@ -0,0 +1,8 @@
+FROM mcr.microsoft.com/playwright:v1.49.1-jammy
+
+WORKDIR /app
+COPY . /app
+
+RUN npm install
+
+CMD ["npx", "playwright", "test", "--headed"]

docs-tests/package-lock.json

@@ -0,0 +1,17 @@
+{
+  "name": "docs-tests",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@types/node": "^22.10.2"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.7"
+  }
+}

docs-tests/package.json

@@ -0,0 +1,9 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  workers: 1,
+  globalSetup: 'tests/globalSetup.ts',
+  use: {
+    storageState: 'app-auth.json',
+  },
+});

docs-tests/playwright.config.ts

@@ -0,0 +1,42 @@
+// This test verifies https://docs.docker.com/admin/company/owners/#add-a-company-owner
+
+import { test, expect } from "@playwright/test";
+test.use({ storageState: "app-auth.json" });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("https://app-stage.docker.com/");
+  await page.waitForLoadState("networkidle");
+
+  // Accept cookies if visible
+  const acceptCookies = page.getByRole("button", {
+    name: "Accept All Cookies",
+  });
+  if (await acceptCookies.isVisible({ timeout: 5000 }).catch(() => false)) {
+    await acceptCookies.click();
+    await expect(acceptCookies).toBeHidden();
+  }
+});
+
+test("adminConsoleAddCompanyOwner", async ({ page }) => {
+  // Select Admin Console and choose company
+  await page.getByTestId("dashboard-card-admin").click();
+  await page.getByRole("menuitem", { name: "sarahscompany Company" }).click();
+
+  // Select Company owners
+  await page.getByRole("menuitem", { name: "Company owners" }).click();
+
+  // Select Add owner and search for owner by Docker ID
+  await page.getByRole("button", { name: "Add owner" }).click();
+  await page.getByLabel("Search by Docker ID").click();
+  await page.getByLabel("Search by Docker ID").fill("sarahstestaccount");
+
+  // Verify Add company owner button exists
+  await expect(
+    page.getByRole("button", { name: "Add company owner" })
+  ).toBeVisible();
+});
+
+test.afterEach(async ({ page }) => {
+  await page.goto("https://app-stage.docker.com/");
+  await page.waitForLoadState("networkidle");
+});

docs-tests/tests/adminConsoleAddCompanyOwner.spec.js

@@ -0,0 +1,44 @@
+// This test verifies https://docs.docker.com/subscription/scale/#add-docker-build-cloud-minutes
+
+import { test, expect } from "@playwright/test";
+test.use({ storageState: "app-auth.json" });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("https://app-stage.docker.com/");
+  await page.waitForLoadState("networkidle");
+
+  // Accept cookies if visible
+  const acceptCookies = page.getByRole("button", {
+    name: "Accept All Cookies",
+  });
+  if (await acceptCookies.isVisible({ timeout: 5000 }).catch(() => false)) {
+    await acceptCookies.click();
+    await expect(acceptCookies).toBeHidden();
+  }
+});
+
+test("adminConsoleAddDBCMinutes", async ({ page }) => {
+  // Select Billing and choose organization
+  await page.getByTestId("dashboard-card-billing-account-center").click();
+  await page
+    .getByRole("menuitem", { name: "docs dat Docker Business" })
+    .click();
+
+  // Select View build minutes
+  await page.getByRole("link", { name: "View build minutes" }).click();
+
+  // Skip DBC pop-up
+  await page.getByRole("button", { name: "Skip" }).click();
+
+  // Select Purchase addiitonal minutes and choose amount
+  await page.getByRole("link", { name: "Purchase additional minutes" }).click();
+  await page.getByLabel("build minutes | $50 $40").check();
+
+  // Select Continue to payment
+  await page.getByRole("button", { name: "Continue to payment" }).click();
+});
+
+test.afterEach(async ({ page }) => {
+  await page.goto("https://app-stage.docker.com/");
+  await page.waitForLoadState("networkidle");
+});

docs-tests/tests/adminConsoleAddDBCMinutes.spec.js

@@ -0,0 +1,39 @@
+// This test verifies https://docs.docker.com/admin/company/organizations/#add-organizations-to-a-company
+
+import { test, expect } from "@playwright/test";
+test.use({ storageState: "app-auth.json" });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("https://app-stage.docker.com/");
+  await page.waitForLoadState("networkidle");
+
+  // Accept cookies if visible
+  const acceptCookies = page.getByRole("button", {
+    name: "Accept All Cookies",
+  });
+  if (await acceptCookies.isVisible({ timeout: 5000 }).catch(() => false)) {
+    await acceptCookies.click();
+    await expect(acceptCookies).toBeHidden();
+  }
+});
+
+test("adminConsoleAddOrganizationsToCompany", async ({ page }) => {
+  // Select Admin Console and choose company
+  await page.getByTestId("dashboard-card-admin").click();
+  await page.getByRole("menuitem", { name: "sarahscompany Company" }).click();
+
+  // Select Add organization
+  await page.getByRole("button", { name: "Add organization" }).click();
+
+  // Choose organization to add from menu
+  await page.getByLabel("Open", { exact: true }).click();
+  await page.getByTestId("add-sarahdat-to-co-menu-item").click();
+
+  // Verify Submit button present
+  await expect(page.getByTestId("add-org-submit-button")).toBeVisible();
+});
+
+test.afterEach(async ({ page }) => {
+  await page.goto("https://app-stage.docker.com/");
+  await page.waitForLoadState("networkidle");
+});

docs-tests/tests/adminConsoleAddOrganizationsToCompany.spec.js

@@ -0,0 +1,50 @@
+// This test verifies https://docs.docker.com/subscription/manage-seats/#add-seats
+// and https://docs.docker.com/subscription/manage-seats/#add-seats
+
+import { test, expect } from "@playwright/test";
+test.use({ storageState: "app-auth.json" });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("https://app-stage.docker.com/");
+  await page.waitForLoadState("networkidle");
+
+  // Accept cookies if visible
+  const acceptCookies = page.getByRole("button", {
+    name: "Accept All Cookies",
+  });
+  if (await acceptCookies.isVisible({ timeout: 5000 }).catch(() => false)) {
+    await acceptCookies.click();
+    await expect(acceptCookies).toBeHidden();
+  }
+});
+
+test("adminConsoleAddSeats", async ({ page }) => {
+  // Select Billing and choose organization
+  await page.getByTestId("dashboard-card-billing-account-center").click();
+  await page
+    .getByRole("menuitem", { name: "docs dat Docker Business" })
+    .click();
+
+  // Select Add seats
+  await page.getByRole("link", { name: "Add seats" }).click();
+
+  // Specify number of seats to add and select Continue to billing
+  await page.getByRole("textbox").fill("10");
+  await page.goto(
+    "https://app-stage.docker.com/billing/sarahdat/update/quantity/plan?add=10"
+  );
+  await page.getByRole("link", { name: "Continue to billing" }).click();
+
+  // Select Continue to payment
+  await page.getByRole("link", { name: "Continue to payment" }).click();
+
+  // Verify Update subscription button is there
+  await expect(
+    page.getByRole("button", { name: "Update subscription" })
+  ).toBeVisible();
+});
+
+test.afterEach(async ({ page }) => {
+  await page.goto("https://app-stage.docker.com/");
+  await page.waitForLoadState("networkidle");
+});