From a4417eaee3576bf0d74da772f9f066fef81ffc48 Mon Sep 17 00:00:00 2001 From: j-mendez Date: Sat, 30 Sep 2023 08:37:06 -0400 Subject: [PATCH] chore(docs): add profile time upfront estimation --- README.md | 23 ++- kayle/package.json | 3 +- kayle/tests/innate-playwright.spec.ts | 66 ++++++++ kayle/tests/innate.ts | 33 +++- kayle/tests/mocks/large-mock.ts | 227 ++++++++++++++++++++++++++ kayle_innate/Cargo.lock | 2 +- kayle_innate/Cargo.toml | 2 +- kayle_innate/README.md | 2 +- kayle_innate/src/lib.rs | 4 +- 9 files changed, 351 insertions(+), 11 deletions(-) create mode 100644 kayle/tests/innate-playwright.spec.ts create mode 100644 kayle/tests/mocks/large-mock.ts diff --git a/README.md b/README.md index a7f655e0..318a5742 100644 --- a/README.md +++ b/README.md @@ -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/lib.rs b/kayle_innate/src/lib.rs index d9aae74b..318e7b8c 100644 --- a/kayle_innate/src/lib.rs +++ b/kayle_innate/src/lib.rs @@ -188,8 +188,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