@govtechsg/oobee 0.10.65 → 0.10.69

package/DETAILS.md

@@ -102,7 +102,7 @@ Note: Level AAA are disabled by default.  Please specify `enable-wcag-aaa` in ru
 | dlitem                      | Ensures `<dt>` and `<dd>` elements are contained by a `<dl>`                                                                                          | Must Fix    | WCAG 1.3.1             |
 | document-title              | Ensures each HTML document contains a non-empty `<title>` element                                                                                     | Must Fix    | WCAG 2.4.2             |
 | duplicate-id-aria           | Ensures every id attribute value used in ARIA and in labels is unique                                                                                 | Must Fix    | WCAG 4.1.2             |
-| form-field-multiple-labels  | Ensures form field does not have multiple label elements                                                                                              | Good to Fix | WCAG 3.3.2             |
+| form-field-multiple-labels  | Ensures form field does not have multiple label elements                                                                                              | Must Fix    | WCAG 3.3.2             |
 | frame-focusable-content     | Ensures `<frame>` and `<iframe>` elements with focusable content do not have tabindex=-1                                                              | Must Fix    | WCAG 2.1.1             |
 | frame-title-unique          | Ensures `<iframe>` and `<frame>` elements contain a unique title attribute                                                                            | Must Fix    | WCAG 4.1.2             |
 | frame-title                 | Ensures `<iframe>` and `<frame>` elements have an accessible name                                                                                     | Must Fix    | WCAG 4.1.2             |

package/Dockerfile

@@ -1,6 +1,6 @@
 # Use Microsoft Playwright image as base image
 # Node version is v22
-FROM mcr.microsoft.com/playwright:v1.50.1-noble
+FROM mcr.microsoft.com/playwright:v1.55.0-noble
 
 # Installation of packages for oobee and runner (locked versions from build log)
 RUN apt-get update && apt-get install -y \

package/INTEGRATION.md

@@ -86,9 +86,13 @@ Unique identifier for the scan instance
 
 ##### Methods
 
-`getScripts()`
+`getAxeScript()`
 
-Get the axe-core script to be injected into the browser, along with other custom Oobee scripts
+Get the axe-core engine to be injected into the browser.
+
+`getOobeeFunctions()`
+
+Get the Oobee custom functions to run accessibility scan. Call this after `getAxeScript()`.
 
 - `runA11yScan(elementsToScan, gradingReadabilityFlag)`
   Runs axe scan on the current page.
@@ -152,6 +156,7 @@ With reference to an instance of Oobee as `oobeeA11y`:
 
 We will be creating the following files in a demo Cypress project:
 
+```
     ├── cypress
     │   ├── e2e
     │   │   └── spec.cy.js
@@ -160,152 +165,33 @@ We will be creating the following files in a demo Cypress project:
     ├── cypress.config.js
     └── package.json
 
-Create a <code>package.json</code> by running <code>npm init</code> . Accept the default options or customise it as needed.
+```
 
-Change the type of npm package to module by running <code>npm pkg set type="module"</code>
+Copy the examples provided in `./examples/oobee-cypress-integration-js` to a folder and set that as a working directory.
 
-Install the following node dependencies by running <code>npm install cypress @govtechsg/oobee --save-dev </code>
+Install any dependencies with `npm install` .
 
 Navigate to <code>node_modules/@govtechsg/oobee</code> and run <code>npm install</code> and <code>npm run build</code> within the folder to install remaining Oobee dependencies:
 
+```
     cd node_modules/@govtechsg/oobee
     npm install
     npm run build
     cd ../../..
+```
 
-Create <code>cypress.config.js</code> with the following contents, and change your Name, E-mail address, and boolean value for whether rule items requiring manual review in the report should be displayed below:
-
-    import { defineConfig } from "cypress";
-    import oobeeA11yInit from "@govtechsg/oobee";
-
-    // viewport used in tests to optimise screenshots
-    const viewportSettings = { width: 1920, height: 1040 };
-    // specifies the number of occurrences before error is thrown for test failure
-    const thresholds = { mustFix: 20, goodToFix: 25 };
-    // additional information to include in the "Scan About" section of the report
-    const scanAboutMetadata = { browser: 'Chrome (Desktop)' };
-    // name of the generated zip of the results at the end of scan
-    const resultsZipName = "oobee-scan-results.zip";
-
-    const oobeeA11y = await oobeeA11yInit({
-      entryUrl: "https://govtechsg.github.io", // initial url to start scan
-      testLabel: "Demo Cypress Scan", // label for test
-      name: "Your Name",
-      email: "email@domain.com",
-      includeScreenshots: true, // include screenshots of affected elements in the report
-      viewportSettings,
-      thresholds: { mustFix: undefined, goodToFix: undefined },
-      scanAboutMetadata: undefined,
-      zip: resultsZipName,
-      deviceChosen: "",
-      strategy: undefined,
-      ruleset: ["enable-wcag-aaa"], // add "disable-oobee" to disable Oobee custom checks
-      specifiedMaxConcurrency: undefined,
-      followRobots: undefined,
-    });
-
-    export default defineConfig({
-        taskTimeout: 120000, // need to extend as screenshot function requires some time
-        viewportHeight: viewportSettings.height,
-        viewportWidth: viewportSettings.width,
-        e2e: {
-            setupNodeEvents(on, _config) {
-                on("task", {
-                    getOobeeA11yScripts() {
-                        return oobeeA11y.getScripts();
-                    },
-                    gradeReadability(sentences) {
-                        return oobeeA11y.gradeReadability(sentences);
-                    },
-                    async pushOobeeA11yScanResults({res, metadata, elementsToClick}) {
-                        return await oobeeA11y.pushScanResults(res, metadata, elementsToClick);
-                    },
-                    returnResultsDir() {
-                        return `results/${oobeeA11y.randomToken}_${oobeeA11y.scanDetails.urlsCrawled.scanned.length}pages/report.html`;
-                    },
-                    finishOobeeA11yTestCase() {
-                        oobeeA11y.testThresholds();
-                        return null;
-                    },
-                    async terminateOobeeA11y() {
-                        return await oobeeA11y.terminate();
-                    },
-                });
-            },
-        },
-    });
-
-Create a sub-folder and file <code>cypress/support/e2e.js</code> with the following contents:
-
-    Cypress.Commands.add("injectOobeeA11yScripts", () => {
-        cy.task("getOobeeA11yScripts").then((s) => {
-            cy.window().then((win) => {
-                win.eval(s);
-            });
-        });
-    });
-
-    Cypress.Commands.add("runOobeeA11yScan", (items={}) => {
-        cy.window().then(async (win) => {
-            const { elementsToScan, elementsToClick, metadata } = items;
-
-            // extract text from the page for readability grading
-            const sentences = win.extractText();
-            // run readability grading separately as it cannot be done within the browser context
-            cy.task("gradeReadability", sentences).then(
-                async (gradingReadabilityFlag) => {
-                    // passing the grading flag to runA11yScan to inject violation as needed
-                    const res = await win.runA11yScan(
-                        elementsToScan,
-                        gradingReadabilityFlag,
-                    );
-                    cy.task("pushOobeeA11yScanResults", {
-                        res,
-                        metadata,
-                        elementsToClick,
-                    }).then((count) => {
-                         return count;
-                    });
-                },
-            );
-            cy.task("finishOobeeA11yTestCase"); // test the accumulated number of issue occurrences against specified thresholds. If exceed, terminate oobeeA11y instance.
-        });
-    });
-
-    Cypress.Commands.add("terminateOobeeA11y", () => {
-        cy.task("terminateOobeeA11y");
-    });
-
-Create <code>cypress/e2e/spec.cy.js</code> with the following contents:
-
-    describe("template spec", () => {
-        it("should run oobee A11y", () => {
-            cy.visit(
-                "https://govtechsg.github.io/purple-banner-embeds/purple-integrated-scan-example.htm"
-            );
-            cy.injectOobeeA11yScripts();
-            cy.runOobeeA11yScan();
-             cy.get("button[onclick=\"toggleSecondSection()\"]").click();
-            // Run a scan on <input> and <button> elements
-            cy.runOobeeA11yScan({
-                elementsToScan: ["input", "button"],
-                elementsToClick: ["button[onclick=\"toggleSecondSection()\"]"],
-                metadata: "Clicked button"
-            });
-
-            cy.terminateOobeeA11y();
-        });
-    });
+Run your test with <code>npx cypress run</code>.
 
-Run your test with <code>npx cypress run</code>.  
 You will see Oobee results generated in <code>results</code> folder.
 
 </details>
+
 <details>
-<summary>Click here to see an example usage in an E2E Cypress test (typescript)</summary>
+   <summary>Click here to see an example usage in an E2E Cypress test (typescript)</summary>
 
 We will be creating the following files in a demo Cypress project:
 
+```
     ├── cypress.config.ts
     ├── cypress.d.ts
     ├── package.json
@@ -317,197 +203,19 @@ We will be creating the following files in a demo Cypress project:
     │           └── e2e.ts
     └── tsconfig.json
 
-Create a <code>package.json</code> by running <code>npm init</code> . Accept the default options or customise it as needed.
-
-Change the type of npm package to module by running <code>npm pkg set type="module"</code>
-
-Install the following node dependencies by running <code>npm install cypress @types/cypress @govtechsg/oobee typescript --save-dev </code>
+```
 
-Create a <code>tsconfig.json</code> in the root directory and add the following:
+Copy the examples provided in `./examples/oobee-cypress-integration-ts` to a folder and set that as a working directory.
 
-```
-{
-"compilerOptions": {
-"outDir": "./dist",
-"allowJs": true,
-"target": "es2021",
-"module": "nodenext",
-"rootDir": "./src",
-"skipLibCheck": true,
-"types": ["cypress"]
-},
-"include": ["./src/**/*", "cypress.d.ts"]
-}
-```
+Install any dependencies with `npm install` .
 
 Navigate to <code>node_modules/@govtechsg/oobee</code> and run <code>npm install</code> and <code>npm run build</code> within the folder to install remaining Oobee dependencies:
 
+```
     cd node_modules/@govtechsg/oobee
     npm install
     npm run build
     cd ../../..
-
-Create <code>cypress.config.ts</code> with the following contents, and change your Name, E-mail address, and boolean value for whether rule items requiring manual review in the report should be displayed below:
-
-    import { defineConfig } from "cypress";
-    import oobeeA11yInit from "@govtechsg/oobee";
-
-    interface ViewportSettings {
-        width: number;
-        height: number;
-    }
-
-    interface Thresholds {
-        mustFix: number;
-        goodToFix: number;
-    }
-
-    interface ScanAboutMetadata {
-        browser: string;
-    }
-
-    // viewport used in tests to optimise screenshots
-    const viewportSettings: ViewportSettings = { width: 1920, height: 1040 };
-    // specifies the number of occurrences before error is thrown for test failure
-    const thresholds: Thresholds = { mustFix: 20, goodToFix: 20 };
-    // additional information to include in the "Scan About" section of the report
-    const scanAboutMetadata: ScanAboutMetadata = { browser: 'Chrome (Desktop)' };
-    // name of the generated zip of the results at the end of scan
-    const resultsZipName: string = "oobee-scan-results.zip"
-
-    const oobeeA11y = await oobeeA11yInit({
-        "https://govtechsg.github.io", // initial url to start scan
-        "Demo Cypress Scan", // label for test
-        "Your Name",
-        "email@domain.com",
-        true, // include screenshots of affected elements in the report
-        viewportSettings,
-        thresholds: { mustFix: undefined, goodToFix: undefined },
-        scanAboutMetadata: undefined,
-        zip: resultsZipName,
-        deviceChosen: "",
-        strategy: undefined,
-        ruleset: ["enable-wcag-aaa"], // add "disable-oobee" to disable Oobee custom checks
-        specifiedMaxConcurrency: undefined,
-        followRobots: undefined,
-    });
-
-    export default defineConfig({
-        taskTimeout: 120000, // need to extend as screenshot function requires some time
-        viewportHeight: viewportSettings.height,
-        viewportWidth: viewportSettings.width,
-        e2e: {
-            setupNodeEvents(on, _config) {
-                on("task", {
-                    getOobeeA11yScripts(): string {
-                        return oobeeA11y.getScripts();
-                    },
-                    gradeReadability(sentences: string[]): string {
-                        return oobeeA11y.gradeReadability(sentences);
-                    },
-                    async pushOobeeA11yScanResults({res, metadata, elementsToClick}: { res: any, metadata: any, elementsToClick: any[] }): Promise<{ mustFix: number, goodToFix: number }> {
-                        return await oobeeA11y.pushScanResults(res, metadata, elementsToClick);
-                    },
-                    returnResultsDir(): string {
-                        return `results/${oobeeA11y.randomToken}_${oobeeA11y.scanDetails.urlsCrawled.scanned.length}pages/reports/report.html`;
-                    },
-                    finishOobeeA11yTestCase(): null {
-                        oobeeA11y.testThresholds();
-                        return null;
-                    },
-                    async terminateOobeeA11y(): Promise<string> {
-                        return await oobeeA11y.terminate();
-                    },
-                });
-            },
-            supportFile: 'dist/cypress/support/e2e.js',
-            specPattern: 'dist/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
-        },
-    });
-
-Create a sub-folder and file <code>src/cypress/support/e2e.ts</code> with the following contents:
-
-    Cypress.Commands.add("injectOobeeA11yScripts", () => {
-        cy.task("getOobeeA11yScripts").then((s: string) => {
-            cy.window().then((win) => {
-                win.eval(s);
-            });
-        });
-    });
-
-    Cypress.Commands.add("runOobeeA11yScan", (items={}) => {
-        cy.window().then(async (win) => {
-            const { elementsToScan, elementsToClick, metadata } = items;
-
-            // extract text from the page for readability grading
-            const sentences = win.extractText();
-            // run readability grading separately as it cannot be done within the browser context
-            cy.task("gradeReadability", sentences).then(
-                async (gradingReadabilityFlag: string) => {
-                    // passing the grading flag to runA11yScan to inject violation as needed
-                    const res = await win.runA11yScan(
-                        elementsToScan,
-                        gradingReadabilityFlag,
-                    );
-                    cy.task("pushOobeeA11yScanResults", {
-                        res,
-                        metadata,
-                        elementsToClick,
-                    }).then((count) => {
-                         return count;
-                    });
-                },
-            );
-            cy.task("finishOobeeA11yTestCase"); // test the accumulated number of issue occurrences against specified thresholds. If exceed, terminate oobeeA11y instance.
-        });
-    });
-
-    Cypress.Commands.add("terminateOobeeA11y", () => {
-        cy.task("terminateOobeeA11y");
-    });
-
-Create <code>src/cypress/e2e/spec.cy.ts</code> with the following contents:
-
-    describe("template spec", () => {
-        it("should run oobee A11y", () => {
-            cy.visit(
-                "https://govtechsg.github.io/purple-banner-embeds/oobee-integrated-scan-example.htm"
-            );
-            cy.injectOobeeA11yScripts();
-            cy.runOobeeA11yScan();
-             cy.get("button[onclick=\"toggleSecondSection()\"]").click();
-            // Run a scan on <input> and <button> elements
-            cy.runOobeeA11yScan({
-                elementsToScan: ["input", "button"],
-                elementsToClick: ["button[onclick=\"toggleSecondSection()\"]"],
-                metadata: "Clicked button"
-            });
-
-            cy.terminateOobeeA11y();
-        });
-    });
-
-Create <code>cypress.d.ts</code> in the root directory with the following contents:
-
-```
-declare namespace Cypress {
-  interface Chainable<Subject> {
-    injectOobeeA11yScripts(): Chainable<void>;
-    runOobeeA11yScan(options?: OobeeScanOptions): Chainable<void>;
-    terminateOobeeA11y(): Chainable<any>;
-  }
-
-  interface OobeeScanOptions {
-    elementsToScan?: string[];
-    elementsToClick?: string[];
-    metadata?: string;
-  }
-}
-
-interface Window {
-  runA11yScan: (elementsToScan?: string[]) => Promise<any>;
-  extractText: () => string[];
-}
 ```
 
 Compile your typescript code with <code>npx tsc</code>.  
@@ -522,211 +230,48 @@ You will see Oobee results generated in <code>results</code> folder.
 <details>
     <summary>Click here to see an example usage in Playwright (javascript)</summary>
 
-Create a <code>package.json</code> by running <code>npm init</code> . Accept the default options or customise it as needed.
+Copy the examples provided in `./examples/oobee-playwright-integration-js` to a folder and set that as a working directory.
 
-Change the type of npm package to module by running <code>npm pkg set type="module"</code>
+Install any dependencies with `npm install`.
 
-Install the following node dependencies by running <code>npm install playwright @govtechsg/oobee --save-dev</code> and <code>npx playwright install</code>
+Install Playwright Chromium by running <code>npx playwright install chromium</code>
 
 Navigate to <code>node_modules/@govtechsg/oobee</code> and run <code>npm install</code> and <code>npm run build</code> within the folder to install remaining Oobee dependencies:
 
+```
     cd node_modules/@govtechsg/oobee
     npm install
     npm run build
     cd ../../..
+```
 
-On your project's root folder, create a Playwright test file <code>oobee-playwright-demo.js</code>:
-
-    import { chromium } from "playwright";
-    import oobeeA11yInit from "@govtechsg/oobee";
-    import { extractText } from "@govtechsg/oobee/dist/crawlers/custom/extractText.js";
-
-    // viewport used in tests to optimise screenshots
-    const viewportSettings = { width: 1920, height: 1040 };
-    // specifies the number of occurrences before error is thrown for test failure
-    const thresholds = { mustFix: 20, goodToFix: 25 };
-    // additional information to include in the "Scan About" section of the report
-    const scanAboutMetadata = { browser: 'Chrome (Desktop)' };
-    // name of the generated zip of the results at the end of scan
-    const resultsZipName = "oobee-scan-results.zip";
-
-    const oobeeA11y = await oobeeA11yInit({
-        entryUrl: "https://govtechsg.github.io", // initial url to start scan
-        testLabel: "Demo Cypress Scan", // label for test
-        name: "Your Name",
-        email: "email@domain.com",
-        includeScreenshots: true, // include screenshots of affected elements in the report
-        viewportSettings,
-        thresholds: { mustFix: undefined, goodToFix: undefined },
-        scanAboutMetadata: undefined,
-        zip: resultsZipName,
-        deviceChosen: "",
-        strategy: undefined,
-        ruleset: ["enable-wcag-aaa"],
-        specifiedMaxConcurrency: undefined,
-        followRobots: undefined,
-    });
-
-    (async () => {
-        const browser = await chromium.launch({
-            headless: false,
-        });
-        const context = await browser.newContext();
-        const page = await context.newPage();
-
-        const runOobeeA11yScan = async (elementsToScan, gradingReadabilityFlag) => {
-            const scanRes = await page.evaluate(
-                async ({ elementsToScan, gradingReadabilityFlag }) => await runA11yScan(elementsToScan, gradingReadabilityFlag),
-                { elementsToScan, gradingReadabilityFlag },
-            );
-            await oobeeA11y.pushScanResults(scanRes);
-            oobeeA11y.testThresholds(); // test the accumulated number of issue occurrences against specified thresholds. If exceed, terminate oobeeA11y instance.
-        };
-
-        await page.goto('https://govtechsg.github.io/purple-banner-embeds/purple-integrated-scan-example.htm');
-        await page.evaluate(oobeeA11y.getScripts());
-
-        const sentences = await page.evaluate(() => extractText());
-        const gradingReadabilityFlag = await oobeeA11y.gradeReadability(sentences);
-
-        await runOobeeA11yScan([], gradingReadabilityFlag);
-
-        await page.getByRole('button', { name: 'Click Me' }).click();
-        // Run a scan on <input> and <button> elements
-        await runOobeeA11yScan(['input', 'button'])
-
-
-        // ---------------------
-        await context.close();
-        await browser.close();
-        await oobeeA11y.terminate();
-    })();
-
-Run your test with <code>node oobee-playwright-demo.js</code> .
+Run your test with `node oobee-playwright-demo.js` .
 
-You will see Oobee results generated in <code>results</code> folder.
+You will see Oobee results generated in results folder.
 
 </details>
+
 <details>
     <summary>Click here to see an example usage in Playwright (typescript)</summary>
 
-Create a <code>package.json</code> by running <code>npm init</code> . Accept the default options or customise it as needed.
+Copy the examples provided in `./examples/oobee-playwright-integration-ts` to a folder and set that as a working directory.
 
-Change the type of npm package to module by running <code>npm pkg set type="module"</code>
+Install any dependencies with `npm install`.
 
-Install the following node dependencies by running <code>npm install playwright @govtechsg/oobee typescript --save-dev</code> and <code>npx playwright install</code>
-
-Create a <code>tsconfig.json</code> in the root directory and add the following:
-
-```
-{
-"compilerOptions": {
-"outDir": "./dist",
-"allowJs": true,
-"target": "es2021",
-"module": "nodenext",
-"rootDir": "./src",
-"skipLibCheck": true
-},
-"include": ["./src/**/*"]
-}
-```
+Install Playwright Chromium by running <code>npx playwright install chromium</code>
 
 Navigate to <code>node_modules/@govtechsg/oobee</code> and run <code>npm install</code> and <code>npm run build</code> within the folder to install remaining Oobee dependencies:
 
+```
     cd node_modules/@govtechsg/oobee
     npm install
     npm run build
     cd ../../..
+```
 
-Create a sub-folder and Playwright test file <code>src/oobee-playwright-demo.ts</code> with the following contents:
-
-    import { Browser, BrowserContext, Page, chromium } from "playwright";
-    import oobeeA11yInit from "@govtechsg/oobee";
-    import { extractText } from "@govtechsg/oobee/dist/crawlers/custom/extractText.js";
-
-    declare const runA11yScan: (
-        elementsToScan?: string[],
-        gradingReadabilityFlag?: string,
-    ) => Promise<any>;
-
-    interface ViewportSettings {
-        width: number;
-        height: number;
-    }
-
-    interface Thresholds {
-        mustFix: number;
-        goodToFix: number;
-    }
-
-    interface ScanAboutMetadata {
-        browser: string;
-    }
-
-    // viewport used in tests to optimise screenshots
-    const viewportSettings: ViewportSettings = { width: 1920, height: 1040 };
-    // specifies the number of occurrences before error is thrown for test failure
-    const thresholds: Thresholds = { mustFix: 20, goodToFix: 25 };
-    // additional information to include in the "Scan About" section of the report
-    const scanAboutMetadata: ScanAboutMetadata = { browser: 'Chrome (Desktop)' };
-    // name of the generated zip of the results at the end of scan
-    const resultsZipName: string = "oobee-scan-results.zip";
-
-    const oobeeA11y = await oobeeA11yInit({
-        entryUrl: "https://govtechsg.github.io", // initial url to start scan
-        testLabel: "Demo Cypress Scan", // label for test
-        name: "Your Name",
-        email: "email@domain.com",
-        includeScreenshots: true, // include screenshots of affected elements in the report
-        viewportSettings,
-        thresholds: { mustFix: undefined, goodToFix: undefined },
-        scanAboutMetadata: undefined,
-        zip: resultsZipName,
-        deviceChosen: "",
-        strategy: undefined,
-        ruleset: ["enable-wcag-aaa"],
-        specifiedMaxConcurrency: undefined,
-        followRobots: undefined,
-    });
-
-    (async () => {
-        const browser: Browser = await chromium.launch({
-            headless: false,
-        });
-        const context: BrowserContext = await browser.newContext();
-        const page: Page = await context.newPage();
-
-        const runOobeeA11yScan = async (elementsToScan?: string[], gradingReadabilityFlag?: string) => {
-            const scanRes = await page.evaluate(
-                async ({ elementsToScan, gradingReadabilityFlag }) => await runA11yScan(elementsToScan, gradingReadabilityFlag),
-                { elementsToScan, gradingReadabilityFlag },
-            );
-            await oobeeA11y.pushScanResults(scanRes);
-            oobeeA11y.testThresholds(); // test the accumulated number of issue occurrences against specified thresholds. If exceed, terminate oobeeA11y instance.
-        };
-
-        await page.goto('https://govtechsg.github.io/purple-banner-embeds/purple-integrated-scan-example.htm');
-        await page.evaluate(oobeeA11y.getScripts());
-
-        const sentences = await page.evaluate(() => extractText());
-        const gradingReadabilityFlag = await oobeeA11y.gradeReadability(sentences);
-
-        await runOobeeA11yScan([], gradingReadabilityFlag);
-
-        await page.getByRole('button', { name: 'Click Me' }).click();
-        // Run a scan on <input> and <button> elements
-        await runOobeeA11yScan(['input', 'button'])
-
+Compile your typescript code with <code>npx tsc</code>.
 
-        // ---------------------
-        await context.close();
-        await browser.close();
-        await oobeeA11y.terminate();
-    })();
-
-Compile your typescript code with <code>npx tsc</code>.  
-Run your test with <code>node dist/oobee-playwright-demo.js</code>.
+Run your test with <code>npm test</code>
 
 You will see Oobee results generated in <code>results</code> folder.
 
@@ -805,6 +350,7 @@ You will see Oobee results generated in <code>results</code> folder.
     runScript();
 
 </details>
+
 <details>
     <summary>Click here to see an example automated web crawler login (typescript)</summary>
 <code>automated-web-crawler-login.ts</code>: