From e1475197958ea9faf41edae8d010705a657611b8 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 24 Oct 2024 11:42:09 +0200 Subject: [PATCH 1/3] Add Selenium + Code Checker example --- .../cypress/cypress.config.ts | 1 + .../playwright/README.md | 2 +- .../playwright/test/playwright.spec.ts | 2 +- accessibility-code-checker/selenium/README.md | 11 +++ .../selenium/package.json | 18 ++++ .../selenium/test/selenium.spec.ts | 65 +++++++++++++++ .../selenium/tsconfig.json | 5 ++ accessibility-code-checker/tsconfig.json | 6 +- yarn.lock | 83 ++++++++++++++++++- 9 files changed, 188 insertions(+), 5 deletions(-) create mode 100644 accessibility-code-checker/selenium/README.md create mode 100644 accessibility-code-checker/selenium/package.json create mode 100644 accessibility-code-checker/selenium/test/selenium.spec.ts create mode 100644 accessibility-code-checker/selenium/tsconfig.json diff --git a/accessibility-code-checker/cypress/cypress.config.ts b/accessibility-code-checker/cypress/cypress.config.ts index 7d41fc8..0a7dbd1 100644 --- a/accessibility-code-checker/cypress/cypress.config.ts +++ b/accessibility-code-checker/cypress/cypress.config.ts @@ -15,6 +15,7 @@ export default defineConfig({ const pageReportUrl = await SIP.upload(audit, { userName: process.env.SI_USER_EMAIL, apiKey: process.env.SI_API_KEY, + testName: (git) => `${git.BranchName} – Cypress integration`, }); Logging.fromAudit(audit, pageReportUrl).print(); diff --git a/accessibility-code-checker/playwright/README.md b/accessibility-code-checker/playwright/README.md index 0acdb58..bf3f727 100644 --- a/accessibility-code-checker/playwright/README.md +++ b/accessibility-code-checker/playwright/README.md @@ -8,4 +8,4 @@ See [the generic instructions](../README.md#setup) for setting up the project. ## Playwright -All the code for checking the page reside in the [test/playwright.spec.ts](./test/playwright.spec.ts) file. \ No newline at end of file +All the code for checking the page reside in the [test/selenium.spec.ts](./test/playwright.spec.ts) file. \ No newline at end of file diff --git a/accessibility-code-checker/playwright/test/playwright.spec.ts b/accessibility-code-checker/playwright/test/playwright.spec.ts index 384133b..def1479 100644 --- a/accessibility-code-checker/playwright/test/playwright.spec.ts +++ b/accessibility-code-checker/playwright/test/playwright.spec.ts @@ -31,7 +31,7 @@ test("is page accessible", async ({ page }) => { const url = await SIP.upload(alfaResult, { userName, apiKey, - testName: (git) => git.BranchName, + testName: (git) => `${git.BranchName} – Playwright integration`, }); // Log the result to the console diff --git a/accessibility-code-checker/selenium/README.md b/accessibility-code-checker/selenium/README.md new file mode 100644 index 0000000..b451096 --- /dev/null +++ b/accessibility-code-checker/selenium/README.md @@ -0,0 +1,11 @@ +# Accessibility Code Checker - Selenium integration + +This workspace demonstrate how to integrate Siteimprove's Accessibility Code Checker with Selenium. + +## Setup + +See [the generic instructions](../README.md#setup) for setting up the project. + +## Selenium + +All the code for checking the page reside in the [test/selenium.spec.ts](./test/selenium.spec.ts) file. \ No newline at end of file diff --git a/accessibility-code-checker/selenium/package.json b/accessibility-code-checker/selenium/package.json new file mode 100644 index 0000000..403b54a --- /dev/null +++ b/accessibility-code-checker/selenium/package.json @@ -0,0 +1,18 @@ +{ + "$schema": "http://json.schemastore.org/package", + "name": "code-checker-selenium", + "description": "Demo of using Selenium with the Accessibility Code Checker", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "test": "node test/selenium.spec.js" + }, + "devDependencies": { + "@siteimprove/alfa-selenium": "^0.74.2", + "@siteimprove/alfa-test": "^0.93.8", + "@siteimprove/alfa-test-utils": "^0.74.2", + "@types/selenium-webdriver": "^4", + "selenium-webdriver": "^4.25.0" + } +} diff --git a/accessibility-code-checker/selenium/test/selenium.spec.ts b/accessibility-code-checker/selenium/test/selenium.spec.ts new file mode 100644 index 0000000..be41ac4 --- /dev/null +++ b/accessibility-code-checker/selenium/test/selenium.spec.ts @@ -0,0 +1,65 @@ +import { Selenium } from "@siteimprove/alfa-selenium"; +import { Audit, Logging, SIP } from "@siteimprove/alfa-test-utils"; + +import { test } from "@siteimprove/alfa-test"; + +import { Browser, Builder, WebDriver } from "selenium-webdriver"; +import chrome from "selenium-webdriver/chrome.js"; + +let driver: WebDriver | undefined; + +const options = new chrome.Options(); +options.addArguments("--headless", "--no-sandbox", "--disable-dev-shm-usage"); + +test("Page should be accessible", async (t) => { + // Create a browser instance + driver = await new Builder() + .forBrowser(Browser.CHROME) + .setChromeOptions(options) + .build(); + + // Navigate to the local web page + // This suppose that the server is already started. See the demo-site folder. + // TODO: Replace with your own page + await driver.get("http://localhost:5173"); + + /* + * Usual Selenium instructions can live here. + * For example, navigating through the page, opening menus or modals, etc. + */ + + // Scrape the page + const alfaPage = await Selenium.toPage(driver); + + // Close the driver + await driver.close(); + + // Run the audit + const alfaResult = await Audit.run(alfaPage); + + // Setup credentials from environment variables. + const userName = process.env.SI_USER_EMAIL; + const apiKey = process.env.SI_API_KEY; + + // Upload the result to Siteimprove Intelligence Platform, if credentials are provided + const url = await SIP.upload(alfaResult, { + userName, + apiKey, + testName: (git) => `{git.BranchName} – Selenium integration`, + }); + + // Log the result to the console + Logging.fromAudit(alfaResult, url).print(); + + // Check if some rule was failing. + const failingRules = alfaResult.resultAggregates.filter( + (aggregate) => aggregate.failed > 0, + ); + + // Fail the test if any rule failed. + t.equal( + failingRules.size, + 0, + `The page has ${failingRules.size} failing rules`, + ); +}); diff --git a/accessibility-code-checker/selenium/tsconfig.json b/accessibility-code-checker/selenium/tsconfig.json new file mode 100644 index 0000000..13f83a3 --- /dev/null +++ b/accessibility-code-checker/selenium/tsconfig.json @@ -0,0 +1,5 @@ +{ + "$schema": "http://json.schemastore.org/tsconfig", + "extends": "../tsconfig.json", + "files": ["test/selenium.spec.ts"] +} diff --git a/accessibility-code-checker/tsconfig.json b/accessibility-code-checker/tsconfig.json index aae2c9f..76e19bd 100644 --- a/accessibility-code-checker/tsconfig.json +++ b/accessibility-code-checker/tsconfig.json @@ -2,5 +2,9 @@ "$schema": "http://json.schemastore.org/tsconfig", "extends": "../tsconfig.json", "files": [], - "references": [{ "path": "cypress" }, { "path": "playwright" }] + "references": [ + { "path": "cypress" }, + { "path": "playwright" }, + { "path": "selenium" } + ] } diff --git a/yarn.lock b/yarn.lock index 3fa0cf9..0111541 100644 --- a/yarn.lock +++ b/yarn.lock @@ -414,6 +414,13 @@ __metadata: languageName: node linkType: hard +"@bazel/runfiles@npm:^5.8.1": + version: 5.8.1 + resolution: "@bazel/runfiles@npm:5.8.1" + checksum: 10/fe463dbc7e82e6aa216bdb1ab18bfa6cdeb0e5b74018d9a25d5869604f784ef31f5c95ed24741891cb436251af4b8ad5f4c83c0b0b8248b13590cfcc40a94d27 + languageName: node + linkType: hard + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -2513,6 +2520,25 @@ __metadata: languageName: node linkType: hard +"@siteimprove/alfa-selenium@npm:^0.74.2": + version: 0.74.2 + resolution: "@siteimprove/alfa-selenium@npm:0.74.2" + dependencies: + "@siteimprove/alfa-device": "npm:^0.93.8" + "@siteimprove/alfa-dom": "npm:^0.93.8" + "@siteimprove/alfa-http": "npm:^0.93.8" + "@siteimprove/alfa-web": "npm:^0.93.8" + selenium-webdriver: "npm:^4.24.0" + peerDependencies: + "@siteimprove/alfa-device": ^0.93.8 + "@siteimprove/alfa-dom": ^0.93.8 + "@siteimprove/alfa-http": ^0.93.8 + "@siteimprove/alfa-web": ^0.93.8 + selenium-webdriver: ^4.24.0 + checksum: 10/60abfc32398c9018a0c5a3537ae6c438e9d8bac72e46d10fed812718a939eaf7fc22cdb0fff5157b349520b6edb81be2458e48ff089569e6adb5697bb3a0806f + languageName: node + linkType: hard + "@siteimprove/alfa-sequence@npm:^0.93.8": version: 0.93.8 resolution: "@siteimprove/alfa-sequence@npm:0.93.8" @@ -2693,6 +2719,16 @@ __metadata: languageName: node linkType: hard +"@siteimprove/alfa-test@npm:^0.93.8": + version: 0.93.8 + resolution: "@siteimprove/alfa-test@npm:0.93.8" + dependencies: + "@types/node": "npm:^20.5.9" + chalk: "npm:^5.3.0" + checksum: 10/b5720ece79d1f05fc43b4c58142464132b200d98fd6032d6858027501bd2633134c4e03efbb2e842f2c2bdaa75fafcc527bac1559eb16d9ef9071dd4abfe23b0 + languageName: node + linkType: hard + "@siteimprove/alfa-thenable@npm:^0.93.8": version: 0.93.8 resolution: "@siteimprove/alfa-thenable@npm:0.93.8" @@ -3187,6 +3223,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^20.5.9": + version: 20.17.0 + resolution: "@types/node@npm:20.17.0" + dependencies: + undici-types: "npm:~6.19.2" + checksum: 10/3b39bb883aeaa558f5779f12bda765db96b56282dd7e55d611915cf6b76d30c355ba099403afd11ccabb6a5bf7fe882ff8ae0af68eda0157669f943b51dc5551 + languageName: node + linkType: hard + "@types/prettier@npm:^2.1.5": version: 2.3.0 resolution: "@types/prettier@npm:2.3.0" @@ -3257,6 +3302,16 @@ __metadata: languageName: node linkType: hard +"@types/selenium-webdriver@npm:^4": + version: 4.1.26 + resolution: "@types/selenium-webdriver@npm:4.1.26" + dependencies: + "@types/node": "npm:*" + "@types/ws": "npm:*" + checksum: 10/540b9dfee2400ce8450ed9090bf90a214132e812f71c3f18f0f0d3e82377c8d6811a2d17ebd2ca15357f5ffe8ea80bdb51719aa7293ca2b278ba23c57728ca18 + languageName: node + linkType: hard + "@types/sinonjs__fake-timers@npm:8.1.1": version: 8.1.1 resolution: "@types/sinonjs__fake-timers@npm:8.1.1" @@ -3306,7 +3361,7 @@ __metadata: languageName: node linkType: hard -"@types/ws@npm:^8.5.3": +"@types/ws@npm:*, @types/ws@npm:^8.5.3": version: 8.5.12 resolution: "@types/ws@npm:8.5.12" dependencies: @@ -5219,6 +5274,18 @@ __metadata: languageName: unknown linkType: soft +"code-checker-selenium@workspace:accessibility-code-checker/selenium": + version: 0.0.0-use.local + resolution: "code-checker-selenium@workspace:accessibility-code-checker/selenium" + dependencies: + "@siteimprove/alfa-selenium": "npm:^0.74.2" + "@siteimprove/alfa-test": "npm:^0.93.8" + "@siteimprove/alfa-test-utils": "npm:^0.74.2" + "@types/selenium-webdriver": "npm:^4" + selenium-webdriver: "npm:^4.25.0" + languageName: unknown + linkType: soft + "code-point-at@npm:^1.0.0": version: 1.1.0 resolution: "code-point-at@npm:1.1.0" @@ -12084,6 +12151,18 @@ __metadata: languageName: node linkType: hard +"selenium-webdriver@npm:^4.24.0, selenium-webdriver@npm:^4.25.0": + version: 4.25.0 + resolution: "selenium-webdriver@npm:4.25.0" + dependencies: + "@bazel/runfiles": "npm:^5.8.1" + jszip: "npm:^3.10.1" + tmp: "npm:^0.2.3" + ws: "npm:^8.18.0" + checksum: 10/24a6b62a70b22f8370fd08f9704549d335a454c3b7a74422bc6ae762650543411473b8bf9a343c870432573232c2b3d4ef93243bc8590c7ebf53239506373673 + languageName: node + linkType: hard + "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.7.0, semver@npm:^5.7.1": version: 5.7.2 resolution: "semver@npm:5.7.2" @@ -12861,7 +12940,7 @@ __metadata: languageName: node linkType: hard -"tmp@npm:~0.2.3": +"tmp@npm:^0.2.3, tmp@npm:~0.2.3": version: 0.2.3 resolution: "tmp@npm:0.2.3" checksum: 10/7b13696787f159c9754793a83aa79a24f1522d47b87462ddb57c18ee93ff26c74cbb2b8d9138f571d2e0e765c728fb2739863a672b280528512c6d83d511c6fa From 6f793cdfe7e4775fe94ad28ae81d696b52fb0576 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 24 Oct 2024 11:57:53 +0200 Subject: [PATCH 2/3] Fix knip configuration --- config/knip.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config/knip.ts b/config/knip.ts index 017f2db..b23b173 100644 --- a/config/knip.ts +++ b/config/knip.ts @@ -6,6 +6,8 @@ const project = ["**/*.ts", "**/*.tsx"]; const config: KnipConfig = { ignoreDependencies: ["prettier"], workspaces: { + "accessibility-code-checker/*": { entry, project }, + "accessibility-code-checker/demo-page": { entry: "src/main.tsx", project }, common: { entry: "persist.ts", project }, "custom-testing/*": { entry, project }, "custom-testing/crawling": { entry: ["crawling.ts"], project }, From 7747ed96b24967cd54c9c26873d2dbefde6a71d7 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 24 Oct 2024 14:32:58 +0200 Subject: [PATCH 3/3] Typo --- accessibility-code-checker/playwright/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/accessibility-code-checker/playwright/README.md b/accessibility-code-checker/playwright/README.md index bf3f727..0acdb58 100644 --- a/accessibility-code-checker/playwright/README.md +++ b/accessibility-code-checker/playwright/README.md @@ -8,4 +8,4 @@ See [the generic instructions](../README.md#setup) for setting up the project. ## Playwright -All the code for checking the page reside in the [test/selenium.spec.ts](./test/playwright.spec.ts) file. \ No newline at end of file +All the code for checking the page reside in the [test/playwright.spec.ts](./test/playwright.spec.ts) file. \ No newline at end of file