AbleDOM playwright tools. #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

mshoho wants to merge 16 commits into main from abledom-playwright

+6,115 −10

.github/workflows/ci.yml

-Original file line number
+Diff line change
@@ Expand Up / @@ -21,15 +21,75 @@ @@
             with:
               node-version: 22.x
-          - run: npm install
-          - run: npx playwright install
-          - run: npm run type-check
-          - run: npm run build
-          - run: npm run lint
-          - run: npm run format
-          - name: "Run tests"
+          - name: Install dependencies
+            run: npm install
+          - name: Install Playwright browsers
+            run: npx playwright install
+          - name: Type check
+            run: npm run type-check
+          - name: Build
+            run: npm run build
+          - name: Lint
+            run: npm run lint
+          - name: Format check
+            run: npm run format
+          - name: Run tests
+            run: npm run test
+          - name: Check for unstaged changes
+            run: |
+              git status --porcelain
+              git diff-index --quiet HEAD -- || exit 1
+      playwright-tools:
+        runs-on: ubuntu-latest
+        steps:
+          - uses: actions/checkout@v3
+          - name: Use Node.js 22
+            uses: actions/setup-node@v3
+            with:
+              node-version: 22.x
+          - name: Install root dependencies
+            run: npm install
+          - name: Install dependencies
+            working-directory: tools/playwright
+            run: npm install
+          - name: Install Playwright browsers
+            working-directory: tools/playwright
+            run: npx playwright install --with-deps chromium
+          - name: Type check
+            working-directory: tools/playwright
+            run: npm run type-check
+          - name: Build
+            working-directory: tools/playwright
+            run: npm run build
+          - name: Lint
+            working-directory: tools/playwright
+            run: npm run lint
+          - name: Format check
+            working-directory: tools/playwright
+            run: npm run format
+          - name: Run tests
+            working-directory: tools/playwright
             run: npm run test
-          - name: "Check for unstaged changes"
+          - name: Check for unstaged changes
             run: |
               git status --porcelain
               git diff-index --quiet HEAD -- || exit 1

.prettierignore

-Original file line number
+Diff line change
@@ -1,4 +1,6 @@
     # Ignore artifacts:
     dist
     node_modules
+    test-results
+    .test-output
     *.yml

src/core.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -68,6 +68,27 @@ export class AbleDOM { @@
       constructor(win: Window, props: AbleDOMProps = {}) {
         this._win = win;
+        // Check if testing mode is requested via window flag
+        // 1 = headed (force headless=false), 2 = headless (force headless=true), 3 = exact (no override)
+        const testingMode = (
+          win as Window & { ableDOMInstanceForTestingNeeded?: number }
+        ).ableDOMInstanceForTestingNeeded;
+        if (testingMode === 1 || testingMode === 2 || testingMode === 3) {
+          // Expose the instance for testing
+          (
+            win as Window & { ableDOMInstanceForTesting?: AbleDOM }
+          ).ableDOMInstanceForTesting = this;
+          // Override headless prop based on mode
+          if (testingMode === 1) {
+            props = { ...props, headless: false };
+          } else if (testingMode === 2) {
+            props = { ...props, headless: true };
+          }
+          // testingMode === 3: use props as-is
+        }
         this._props = props;
         const _elementsToValidate: Set<HTMLElementWithAbleDOM> = new Set();
@@ Expand Down @@

tests/testingMode/testingMode-exact.html

-Original file line number
+Diff line change
@@ -0,0 +1,17 @@
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Testing Mode - Exact (3)</title>
+        <script>
+          // Set the testing mode flag BEFORE AbleDOM loads
+          window.ableDOMInstanceForTestingNeeded = 3;
+        </script>
+        <script type="module" src="./testingMode-exact.ts"></script>
+      </head>
+      <body>
+        <h1>Testing Mode - Exact</h1>
+        <button id="button-1">Button1</button>
+      </body>
+    </html>

tests/testingMode/testingMode-exact.ts

-Original file line number
+Diff line change
@@ -0,0 +1,16 @@
+    /*!
+     * Copyright (c) Microsoft Corporation. All rights reserved.
+     * Licensed under the MIT License.
+     */
+    import { AbleDOM, FocusableElementLabelRule } from "abledom";
+    import { initIdleProp, getAbleDOMCallbacks } from "../utils";
+    // Create AbleDOM with headless: false (should stay false with mode 3)
+    const ableDOM = new AbleDOM(window, {
+      headless: false,
+      callbacks: getAbleDOMCallbacks(),
+    });
+    initIdleProp(ableDOM);
+    ableDOM.addRule(new FocusableElementLabelRule());
+    ableDOM.start();

tests/testingMode/testingMode-headed.html

-Original file line number
+Diff line change
@@ -0,0 +1,17 @@
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Testing Mode - Headed (1)</title>
+        <script>
+          // Set the testing mode flag BEFORE AbleDOM loads
+          window.ableDOMInstanceForTestingNeeded = 1;
+        </script>
+        <script type="module" src="./testingMode-headed.ts"></script>
+      </head>
+      <body>
+        <h1>Testing Mode - Headed</h1>
+        <button id="button-1">Button1</button>
+      </body>
+    </html>

tests/testingMode/testingMode-headed.ts

-Original file line number
+Diff line change
@@ -0,0 +1,16 @@
+    /*!
+     * Copyright (c) Microsoft Corporation. All rights reserved.
+     * Licensed under the MIT License.
+     */
+    import { AbleDOM, FocusableElementLabelRule } from "abledom";
+    import { initIdleProp, getAbleDOMCallbacks } from "../utils";
+    // Create AbleDOM with headless: true (should be overridden to false by mode 1)
+    const ableDOM = new AbleDOM(window, {
+      headless: true,
+      callbacks: getAbleDOMCallbacks(),
+    });
+    initIdleProp(ableDOM);
+    ableDOM.addRule(new FocusableElementLabelRule());
+    ableDOM.start();

tests/testingMode/testingMode-headless.html

-Original file line number
+Diff line change
@@ -0,0 +1,17 @@
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Testing Mode - Headless (2)</title>
+        <script>
+          // Set the testing mode flag BEFORE AbleDOM loads
+          window.ableDOMInstanceForTestingNeeded = 2;
+        </script>
+        <script type="module" src="./testingMode-headless.ts"></script>
+      </head>
+      <body>
+        <h1>Testing Mode - Headless</h1>
+        <button id="button-1">Button1</button>
+      </body>
+    </html>

tests/testingMode/testingMode-headless.ts

-Original file line number
+Diff line change
@@ -0,0 +1,16 @@
+    /*!
+     * Copyright (c) Microsoft Corporation. All rights reserved.
+     * Licensed under the MIT License.
+     */
+    import { AbleDOM, FocusableElementLabelRule } from "abledom";
+    import { initIdleProp, getAbleDOMCallbacks } from "../utils";
+    // Create AbleDOM with headless: false (should be overridden to true by mode 2)
+    const ableDOM = new AbleDOM(window, {
+      headless: false,
+      callbacks: getAbleDOMCallbacks(),
+    });
+    initIdleProp(ableDOM);
+    ableDOM.addRule(new FocusableElementLabelRule());
+    ableDOM.start();

tests/testingMode/testingMode-none.html

-Original file line number
+Diff line change
@@ -0,0 +1,14 @@
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Testing Mode - None (no flag)</title>
+        <!-- No ableDOMInstanceForTestingNeeded flag set -->
+        <script type="module" src="./testingMode-none.ts"></script>
+      </head>
+      <body>
+        <h1>Testing Mode - None</h1>
+        <button id="button-1">Button1</button>
+      </body>
+    </html>

tests/testingMode/testingMode-none.ts

-Original file line number
+Diff line change
@@ -0,0 +1,16 @@
+    /*!
+     * Copyright (c) Microsoft Corporation. All rights reserved.
+     * Licensed under the MIT License.
+     */
+    import { AbleDOM, FocusableElementLabelRule } from "abledom";
+    import { initIdleProp, getAbleDOMCallbacks } from "../utils";
+    // Create AbleDOM without any testing mode flag
+    const ableDOM = new AbleDOM(window, {
+      headless: true,
+      callbacks: getAbleDOMCallbacks(),
+    });
+    initIdleProp(ableDOM);
+    ableDOM.addRule(new FocusableElementLabelRule());
+    ableDOM.start();

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AbleDOM playwright tools. #24

Diff view

Diff view

There are no files selected for viewing

Check warning

Uh oh!

AbleDOM playwright tools. #24

Are you sure you want to change the base?

AbleDOM playwright tools. #24

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Check warning

Uh oh!