chore(docs): add profile time upfront estimation

a11ywatch · Sep 30, 2023 · bdd8af7 · bdd8af7
1 parent 732e849
commit bdd8af7
Show file tree

Hide file tree

Showing 13 changed files with 397 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ The blazing fast and accurate web accessibility engine.
 Install your browser automation lib [playwright](https://github.com/microsoft/playwright) or [puppeteer](https://github.com/puppeteer/puppeteer).
 
 ```sh
-# yarn add puppeteer or yarn add playwright
+# npm i puppeteer or npm i playwright
 npm install kayle --save
 ```
 
@@ -21,11 +21,15 @@ const page = await browser.newPage();
 const results = await kayle({
   page,
   browser,
+  runners: ["htmlcs"] // options are  "htmlcs", "axe", and "ace". The order is from fastest to slowest. Defaults to htmlcs.
   origin: "https://a11ywatch.com",
   // html: "<html>...</html>"
 });
 ```
 
+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.
 
 If you need to run a full site-wide crawl import `autoKayle`.
@@ -44,7 +48,6 @@ const page = await browser.newPage();
 const results = await autoKayle({
   page,
   browser,
-  runners: ["htmlcs", "axe"],
   includeWarnings: true,
   origin: "https://a11ywatch.com",
   waitUntil: "domcontentloaded",
@@ -54,6 +57,23 @@ const results = await autoKayle({
 });
 ```
 
+```sh
+# Output of time between runners with a realistic run - Rust/WASM is in the making and not yet ready.
+# Measurement is only calculated from the runner and not the extra latency to get the page initially. View the `innate` test to see more detals.
+
+# puppeteer - speed is stable across most versions
+# Rust/WASM 18.43487498164177
+# FAST_HTMLCS 29.915208011865616
+# FAST_AXE 162.87204200029373
+# ACE 512.5237080156803
+
+# playwright - the speed depends on the version
+# Rust/WASM TIME  17.60895800590515
+# FAST_HTMLCS TIME 33.50962498784065
+# FAST_AXE TIME 203.2565419971943
+# ACE TIME 905.6748749911785
+```
+
 ## Clips
 
 You can include base64 images with the audits to get a visual of the exact location of the issue.
@@ -62,7 +82,6 @@ You can include base64 images with the audits to get a visual of the exact locat
 const results = await kayle({
   page,
   browser,
-  runners: ["axe"],
   includeWarnings: true,
   origin: "https://www.drake.com",
   waitUntil: "domcontentloaded",

diff --git a/kayle/package.json b/kayle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kayle",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "Extremely fast and accurate accessibility engine built for any headless tool like playwright or puppeteer.",
   "main": "./build/index.js",
   "keywords": [
@@ -47,6 +47,7 @@
     "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",
     "test:playwright:clips": "npm run compile:test && npx playwright test ./tests/clips-playwright.spec.ts",
+    "test:playwright:innate": "npm run compile:test &&  npx playwright test ./tests/innate-playwright.spec.ts",
     "test:puppeteer:wasm": "npm run compile:test && node _tests/tests/wasm.js",
     "test:puppeteer:automa": "npm run compile:test && node _tests/tests/automa.js",
     "test:puppeteer:extension": "npm run compile:test && yarn build:extension && node _tests/tests/extension.js",

diff --git a/kayle/tests/innate-playwright.spec.ts b/kayle/tests/innate-playwright.spec.ts
@@ -0,0 +1,66 @@
+import { innateBuilder, kayle } from "kayle";
+import { drakeMock } from "./mocks/html-mock";
+import { performance } from "perf_hooks";
+import { test } from "@playwright/test";
+import { _audit_not_ready } from "kayle_innate";
+
+test("kayle_innate, fast_htmlcs, fast_axecore, and ace audit drakeMock profiling compare", async ({
+  page,
+  browser,
+}, testInfo) => {
+  if (process.env.LOG_ENABLED) {
+    page.on("console", (msg) => console.log("PAGE LOG:", msg.text()));
+  }
+  const { html, css } = await innateBuilder({
+    page,
+    browser,
+    runners: ["htmlcs"],
+    includeWarnings: true,
+    origin: "https://www.drake.com",
+    html: drakeMock,
+  });
+  const startTime = performance.now();
+  // 8 - after building end engine optimized most likely will be at 12 ms
+  await _audit_not_ready(html, css);
+  const nextTime = performance.now() - startTime;
+  console.log("Rust/WASM TIME ", nextTime);
+
+  const st = performance.now();
+  await kayle({
+    page,
+    browser,
+    runners: ["htmlcs"],
+    includeWarnings: true,
+    origin: "https://www.drake.com",
+    html: drakeMock,
+    noIntercept: true,
+  });
+  const nt = performance.now() - st;
+  console.log("FAST_HTMLCS TIME", nt);
+
+  const s = performance.now();
+  await kayle({
+    page,
+    browser,
+    runners: ["axe"],
+    includeWarnings: true,
+    origin: "https://www.drake.com",
+    html: drakeMock,
+    noIntercept: true,
+  });
+  const n = performance.now() - s;
+  console.log("FAST_AXE TIME", n);
+
+  const a = performance.now();
+  await kayle({
+    page,
+    browser,
+    runners: ["ace"],
+    includeWarnings: true,
+    origin: "https://www.drake.com",
+    html: drakeMock,
+    noIntercept: true,
+  });
+  const an = performance.now() - a;
+  console.log("ACE TIME", an);
+});
diff --git a/kayle/tests/innate.ts b/kayle/tests/innate.ts
@@ -2,7 +2,7 @@ import puppeteer from "puppeteer";
 import { innateBuilder, kayle } from "kayle";
 import { drakeMock } from "./mocks/html-mock";
 import { performance } from "perf_hooks";
-import { audit } from "kayle_innate";
+import { _audit_not_ready } from "kayle_innate";
 
 // setup test for rust wasm auditing
 (async () => {
@@ -21,12 +21,11 @@ import { audit } from "kayle_innate";
   });
   const startTime = performance.now();
   // 8 - after building end engine optimized most likely will be at 12 ms
-  await audit(html, css);
+  await _audit_not_ready(html, css);
   const nextTime = performance.now() - startTime;
   console.log("Rust/WASM TIME ", nextTime);
 
   const st = performance.now();
-  // 28 ms
   await kayle({
     page,
     browser,
@@ -37,7 +36,33 @@ import { audit } from "kayle_innate";
     noIntercept: true,
   });
   const nt = performance.now() - st;
-  console.log("JS TIME", nt);
+  console.log("FAST_HTMLCS TIME", nt);
+
+  const s = performance.now();
+  await kayle({
+    page,
+    browser,
+    runners: ["axe"],
+    includeWarnings: true,
+    origin: "https://www.drake.com",
+    html: drakeMock,
+    noIntercept: true,
+  });
+  const n = performance.now() - s;
+  console.log("FAST_AXE TIME", n);
+
+  const a = performance.now();
+  await kayle({
+    page,
+    browser,
+    runners: ["ace"],
+    includeWarnings: true,
+    origin: "https://www.drake.com",
+    html: drakeMock,
+    noIntercept: true,
+  });
+  const an = performance.now() - a;
+  console.log("ACE TIME", an);
 
   await browser.close();
 })();
diff --git a/kayle/tests/mocks/large-mock.ts b/kayle/tests/mocks/large-mock.ts
diff --git a/kayle_innate/Cargo.lock b/kayle_innate/Cargo.lock
diff --git a/kayle_innate/Cargo.toml b/kayle_innate/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "kayle_innate"
-version = "0.0.19"
+version = "0.0.20"
 authors = ["j-mendez"]
 edition = "2018"
 license = "MIT"

diff --git a/kayle_innate/README.md b/kayle_innate/README.md
@@ -31,4 +31,4 @@ In order to test the accessibility parser in Rust run.
 
 1. Port expensive functions to wasm with preloading capabilities injection into browsers.
 1. Reborn the accessibility testing in rust.
-1. Write a web accessibility engine in Rust/Wasm.
+1. Write a web accessibility engine in Rust/Wasm.
diff --git a/kayle_innate/src/engine/issue.rs b/kayle_innate/src/engine/issue.rs
@@ -0,0 +1,35 @@
+/// clip bounding box
+pub struct Clip {
+    /// the x coords
+    x: u32,
+    /// the y coords
+    y: u32,
+    /// the element height
+    height: u32,
+    /// the element width
+    width: u32,
+}
+
+/// issue details
+pub struct Issue {
+    /// the context of the issue or raw html
+    pub context: String,
+    /// the selector to identify the issue with css, xpath, or raw path
+    pub selector: String,
+    /// the type of code for the issue
+    pub code: String,
+    /// the type of issue
+    pub issue_type: String,
+    /// the typecode of the issue 0,1,2
+    pub type_code: u8,
+    /// the message of the issue
+    pub message: String,
+    /// the type of runner
+    pub runner: String,
+    /// extra details for the runner
+    pub runner_extras: std::collections::HashMap<String, String>,
+    /// the amount of times the issue appeared
+    pub recurrence: u32,
+    /// the visual position of the element
+    pub clip: Option<Clip>,
+}
diff --git a/kayle_innate/src/engine/mod.rs b/kayle_innate/src/engine/mod.rs
@@ -0,0 +1,4 @@
+/// issue handling and formats
+mod issue;
+/// rules like WCAG
+mod rules;
diff --git a/kayle_innate/src/i18n/locales.rs b/kayle_innate/src/i18n/locales.rs
@@ -1 +1,5 @@
 // support for based locales in readme
+pub fn get_local(lang: &str, message: &str) -> String {
+    /// get the local from the map
+    Default::default()
+}
diff --git a/kayle_innate/src/i18n/mod.rs b/kayle_innate/src/i18n/mod.rs
diff --git a/kayle_innate/src/lib.rs b/kayle_innate/src/lib.rs
@@ -2,6 +2,8 @@
 extern crate lazy_static;
 
 mod utils;
+// mod engine;
+
 use case_insensitive_string::CaseInsensitiveString;
 use std::collections::HashSet;
 use utils::{convert_abs_path, convert_base_path, domain_name, set_panic_hook};
@@ -151,15 +153,6 @@ pub fn parse_accessibility_tree(
 
     console_log!("Starting accessibility tree parsing. This is incomplete and should not be used in production.");
 
-    // STAPLE get the following for selecting
-    // Element name.
-    // Element siblings.
-    // Element descendant.
-    // Element props.
-    // Challenges in binding css to nodes arise from external sheets.
-    // The chrome browser we can set to ignore all assets and fetch them here but, it would be re-doing the wheel.
-    // If we can send the Stylesheets from node to rust this could leverage the sheets attached since we just need the node references.
-
     let t = now();
     // parse doc will start from html downwards
     let h = scraper::Html::parse_document(html);
@@ -188,8 +181,10 @@ pub fn parse_accessibility_tree(
 
 #[wasm_bindgen]
 /// audit a web page passing the html and css rules.
-pub fn audit(html: &str, _css_rules: &str) {
+pub fn _audit_not_ready(html: &str, _css_rules: &str) {
     let _tree = parse_accessibility_tree(&html);
+    let _css_nodes = parse_css(_css_rules);
+    // reference the css model when in the tree to get style information
 }
 
 /// parse css tree to maps