diff --git a/README.md b/README.md index a7f655e0..1901f415 100644 --- 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: "..." }); ``` +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 index 9936a640..bd261397 100644 --- 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 new file mode 100644 index 00000000..b5cfda18 --- /dev/null +++ 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 index b4784cd6..0917d2a5 100644 --- 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 new file mode 100644 index 00000000..9aa1f03c --- /dev/null +++ b/kayle/tests/mocks/large-mock.ts @@ -0,0 +1,227 @@ +export const largeMock = ` +HBO: Home to Groundbreaking Series, Movies, Comedies & Documentaries
savior complex
AVAILABLE NOW

Savior Complex

+
+
+

This docuseries examines the thorny complexities of foreign aid work done in the name of humanitarian and religious ideals.

+
+
+
Watch the TrailerFIND OUT MORE

Stream the Latest

+ +

 

+

Tonight on HBO

SEE FULL SCHEDULE
+ +
+
+
+
+
+
+
+
+ +

It's All Here

+ Sign Up Now +
+

Emmy® Nominations

+ +

The 75th Emmy® Award nominations are officially in and HBO has scored a total of 123. See below for the full list of HBO Primetime and Creative Arts Emmy® nominations. All shows are available to stream on Max.

+
FIND OUT MORE
+ +
+
+
Succession
+
The Last of Us
+
White Lotus
+
+
+

Mark Your Calendar

+

+ +
+ + Celebrando Nuestras Voces: Our Story Continues + +
+

Celebrate Latino Heritage Month with star-studded series, movies, and specials.

+
FIND OUT MORE

Coming Soon to HBO

+ +

 

+
Watch the Trailer
2:02
Watch the Trailer
S1 AVAILABLE NOW
+ +

The Last of Us

+ +

The must-see drama series based on the critically acclaimed video game and starring Pedro Pascal and Bella Ramsey.

+
FIND OUT MORE

Rewatchable Comedies

+

Watch the Trailer
2:32
Watch the Trailer
s1 Available Now
+ +

House of the Dragon

+ +

Fire will reign. Stream the full season of House of the Dragon, the prequel to Game of Thrones, now.

+
Find Out More

Watch Just-Added Movies

+

Watch the Donyale Luna: Supermodel Trailer
2:26
Watch the Donyale Luna: Supermodel Trailer

What's New, What's Leaving

+ +

See what shows, movies, documentaries, and more are coming — and leaving — in September.

+
FIND OUT MORE
+
+ + + +

Stream all of HBO, plus hit series, movies, reality, and more.

+ Sign Up Now +
+`; diff --git a/kayle_innate/Cargo.lock b/kayle_innate/Cargo.lock index c565ddb8..1c09490e 100644 --- a/kayle_innate/Cargo.lock +++ b/kayle_innate/Cargo.lock @@ -233,7 +233,7 @@ dependencies = [ [[package]] name = "kayle_innate" -version = "0.0.19" +version = "0.0.20" dependencies = [ "case_insensitive_string", "console_error_panic_hook", diff --git a/kayle_innate/Cargo.toml b/kayle_innate/Cargo.toml index fd58d7a7..cd6c1713 100644 --- 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 index 4383162f..f6be0a4e 100644 --- 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. \ No newline at end of file +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 new file mode 100644 index 00000000..3b9b69da --- /dev/null +++ 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, + /// the amount of times the issue appeared + pub recurrence: u32, + /// the visual position of the element + pub clip: Option, +} diff --git a/kayle_innate/src/engine/mod.rs b/kayle_innate/src/engine/mod.rs new file mode 100644 index 00000000..fd1584cc --- /dev/null +++ b/kayle_innate/src/engine/mod.rs @@ -0,0 +1,4 @@ +/// issue handling and formats +mod issue; +/// rules like WCAG +mod rules; \ No newline at end of file diff --git a/kayle_innate/src/i18n/locales.rs b/kayle_innate/src/i18n/locales.rs index 7a96e95f..8a44c465 100644 --- 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() +} \ No newline at end of file diff --git a/kayle_innate/src/i18n/mod.rs b/kayle_innate/src/i18n/mod.rs new file mode 100644 index 00000000..e69de29b diff --git a/kayle_innate/src/lib.rs b/kayle_innate/src/lib.rs index d9aae74b..86e92113 100644 --- 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