From 355b9a124fd86d00fc414f8106aca3c5f4714bac Mon Sep 17 00:00:00 2001 From: j-mendez Date: Tue, 3 Oct 2023 11:43:46 -0400 Subject: [PATCH] chore(selectors): fix invalid html selector [#11] --- README.md | 2 +- kayle/lib/option.ts | 11 +++--- kayle/lib/runner.ts | 5 +-- kayle/lib/wasm/rust-audit.ts | 2 +- kayle/package.json | 3 +- kayle/tests/innate-playwright.spec.ts | 9 +++-- kayle/tests/innate.ts | 9 +++-- kayle/tests/selectors.ts | 50 +++++++++++++++++++++++++++ kayle_innate/README.md | 2 +- 9 files changed, 74 insertions(+), 19 deletions(-) create mode 100644 kayle/tests/selectors.ts diff --git a/README.md b/README.md index 1486c2a..ae0501c 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ const results = await kayle({ }); ``` -It is recommended to use `htmlcs` as the runner or simply not declare a runner for the default. +It is recommended to use `htmlcs` as the runner or simply not declare a runner for the default. We did a massive rewrite on htmlcs and it is extremely fast and stable. When passing raw `html` try to also include the `origin` or the url, this sets `window.origin` and helps scripts that rely on it to work correctly or else relatives scripts will not work since the relative path does not exist on the locale machine. diff --git a/kayle/lib/option.ts b/kayle/lib/option.ts index f77cb9f..cce306f 100644 --- a/kayle/lib/option.ts +++ b/kayle/lib/option.ts @@ -46,13 +46,10 @@ export function extractArgs(o, watcher?: Watcher) { // default to a runner if ( !options.runners.some( - (runner) => - runner === "axe" || - runner === "htmlcs" || - runner === "ace" - // || - // // wasm build when released - // runner === "kayle" + (runner) => runner === "axe" || runner === "htmlcs" || runner === "ace" + // || + // // wasm build when released + // runner === "kayle" ) ) { options.runners.push("htmlcs"); diff --git a/kayle/lib/runner.ts b/kayle/lib/runner.ts index c845a33..276ad40 100644 --- a/kayle/lib/runner.ts +++ b/kayle/lib/runner.ts @@ -100,7 +100,8 @@ return { context: context || issue.snippet, - selector: selector || (issue.path && issue.path.dom), + selector: + selector || (issue.path && issue.path.dom ? issue.path.dom : ""), code: issue.code || issue.ruleId, type: issue.type || issueCodeReverseMap[typeCode], typeCode: typeCode || 0, @@ -157,7 +158,7 @@ // get css selelector todo: shortest path https://patents.google.com/patent/CN105094940A/en const getElementSelector = (element: HTMLElement) => { - if (!element) { + if (!element || element.nodeName == "HTML") { return ""; } diff --git a/kayle/lib/wasm/rust-audit.ts b/kayle/lib/wasm/rust-audit.ts index 156537b..899f036 100644 --- a/kayle/lib/wasm/rust-audit.ts +++ b/kayle/lib/wasm/rust-audit.ts @@ -12,7 +12,7 @@ export const innateBuilder = async (o: RunnerConf) => { console.log("NOT READY YET. Do not use."); const watcher = new Watcher(); const config = extractArgs(o, watcher); - + const navigate = config.page.url() === "about:blank" && (config.origin || o.html); diff --git a/kayle/package.json b/kayle/package.json index d0081e3..ef8216a 100644 --- a/kayle/package.json +++ b/kayle/package.json @@ -1,6 +1,6 @@ { "name": "kayle", - "version": "0.7.11", + "version": "0.7.12", "description": "Extremely fast and accurate accessibility engine built for any headless tool like playwright or puppeteer.", "main": "./build/index.js", "keywords": [ @@ -43,6 +43,7 @@ "test:puppeteer:htmlcs": "npm run compile:test && node _tests/tests/basic-htmlcs.js", "test:puppeteer:ace": "npm run compile:test && node _tests/tests/basic-ace.js", "test:missing": "npm run compile:test && node _tests/tests/missing.js", + "test:selectors": "npm run compile:test && node _tests/tests/selectors.js", "test:playwright": "npm run compile:test && npx playwright test ./tests/basic-playwright.spec.ts", "test:playwright:axe": "npm run compile:test && npx playwright test ./tests/basic-axe-playwright.spec.ts", "test:playwright:htmlcs": "npm run compile:test && npx playwright test ./tests/basic-htmlcs-playwright.spec", diff --git a/kayle/tests/innate-playwright.spec.ts b/kayle/tests/innate-playwright.spec.ts index ca90797..f684dc5 100644 --- a/kayle/tests/innate-playwright.spec.ts +++ b/kayle/tests/innate-playwright.spec.ts @@ -19,12 +19,15 @@ test("kayle_innate, fast_htmlcs, fast_axecore, and ace audit drakeMock profiling origin: "https://www.drake.com", html: drakeMock, }); - const mock = html.replace("Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels", "") + const mock = html.replace( + "Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels", + "" + ); const startTime = performance.now(); const audit = await _audit_not_ready(mock, css); const nextTime = performance.now() - startTime; console.log("Rust/WASM TIME ", nextTime); - + const st = performance.now(); await kayle({ page, @@ -63,5 +66,5 @@ test("kayle_innate, fast_htmlcs, fast_axecore, and ace audit drakeMock profiling }); const an = performance.now() - a; console.log("ACE TIME", an); - console.log(`Rust Audit: `, audit) + console.log(`Rust Audit: `, audit); }); diff --git a/kayle/tests/innate.ts b/kayle/tests/innate.ts index 379f052..ad346cb 100644 --- a/kayle/tests/innate.ts +++ b/kayle/tests/innate.ts @@ -16,9 +16,12 @@ import { _audit_not_ready } from "kayle_innate"; browser, includeWarnings: true, origin: "https://www.drake.com", - html: drakeMock + html: drakeMock, }); - const mock = html.replace("Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels", "") + const mock = html.replace( + "Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels", + "" + ); const startTime = performance.now(); const audit = await _audit_not_ready(mock, css); const nextTime = performance.now() - startTime; @@ -62,7 +65,7 @@ import { _audit_not_ready } from "kayle_innate"; }); const an = performance.now() - a; console.log("ACE TIME", an); - console.log(`Rust Audit: `, audit) + console.log(`Rust Audit: `, audit); await browser.close(); })(); diff --git a/kayle/tests/selectors.ts b/kayle/tests/selectors.ts new file mode 100644 index 0000000..484f25a --- /dev/null +++ b/kayle/tests/selectors.ts @@ -0,0 +1,50 @@ +// test critical missing alt, input label, and etc. + +import assert from "assert"; +import puppeteer from "puppeteer"; +import { kayle } from "kayle"; +import { performance } from "perf_hooks"; + +const defaultHTML = ` + + + +Hello + + +

Hello

+ +`; + +(async () => { + const browser = await puppeteer.launch({ headless: "new" }); + const page = await browser.newPage(); + if (process.env.LOG_ENABLED) { + page.on("console", (msg) => console.log("PAGE LOG:", msg.text())); + } + const startTime = performance.now(); + const { issues, pageUrl, documentTitle, meta, automateable } = await kayle({ + page, + browser, + runners: ["axe"], + includeWarnings: true, + html: defaultHTML, + origin: "http://www.example.com", // origin is the fake url in place of the raw content + }); + const nextTime = performance.now() - startTime; + + console.log(issues); + console.log(meta); + console.log(automateable); + console.log("time took", nextTime); + + // assert(Array.isArray(issues)); + // assert(meta.errorCount === 5); + // assert(meta.warningCount === 0); + // assert(meta.accessScore === 100); // TODO: add alt missing to access scoring + + assert(typeof pageUrl === "string"); + assert(typeof documentTitle === "string"); + + await browser.close(); +})(); diff --git a/kayle_innate/README.md b/kayle_innate/README.md index 7e00f9a..6c4801c 100644 --- a/kayle_innate/README.md +++ b/kayle_innate/README.md @@ -25,4 +25,4 @@ In order to test the accessibility parser in Rust run. ## Publishing 1. `wasm-pack build` -1. `wasm-pack publish` \ No newline at end of file +1. `wasm-pack publish`