chore(selectors): fix invalid html selector [#11]

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.

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");

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 "";
     }
 

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);
 

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",

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("<title>Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels</title>", "")
+  const mock = html.replace(
+    "<title>Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels</title>",
+    ""
+  );
   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);
 });

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("<title>Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels</title>", "")
+  const mock = html.replace(
+    "<title>Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels</title>",
+    ""
+  );
   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();
 })();

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 = `<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Hello</title>
+</head>
+<body>
+<p>Hello</p>
+</body>
+</html>`;
+
+(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();
+})();

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`
+1. `wasm-pack publish`