Aria selector slowness (#517)

* add stackoverflow

* update wdio.conf.js

* add puppeteer

* tidy up

* setup browser adaptable conf

* fix puppeteer

* update package.json

* npm uninstall puppeteer

* add files

* browser choice

* package changes

* move files

* increase timeout

* fix tests

* Revert "increase timeout"

This reverts commit 21828ed.

* Remove deprecated calls to switchToFrame

* Revert "Remove deprecated calls to switchToFrame"

This reverts commit db8f48f.

* update package.json

Author: fpereira1

.github/workflows/test.yml

@@ -16,6 +16,7 @@ jobs:
           - queryElements
           - overwriteCommand
           - selectors
+          - selectorsAria
           - getting-started
           - setup
           - testDownloadBehavior

.gitignore

@@ -105,4 +105,4 @@ dist
 
 *.png
 
-testDownloadBehavior/package.json
+downloads/package.json

package.json

@@ -28,9 +28,9 @@
     "customMatchers": "cross-env TS_NODE_PROJECT=./customMatchers/tsconfig.json EXAMPLE_RECIPE=customMatchers wdio run ./wdio.conf.js --spec ./customMatchers/example.ts",
     "deleteCookies": "cross-env EXAMPLE_RECIPE=deleteCookies wdio run ./wdio.conf.js --spec ./deleteCookies/example.js",
     "testDownloadBehavior": "run-s testDownload:*",
-    "testDownload:chrome": "cross-env BROWSER=chrome wdio run ./testDownloadBehavior/wdio.conf.js --spec ./testDownloadBehavior/example.js",
-    "testDownload:firefox": "cross-env BROWSER=firefox wdio run ./testDownloadBehavior/wdio.conf.js --spec ./testDownloadBehavior/example.js",
-    "testDownload:edge": "cross-env BROWSER=edge wdio run ./testDownloadBehavior/wdio.conf.js --spec ./testDownloadBehavior/example.js",
+    "testDownload:chrome": "cross-env BROWSER=chrome wdio run ./wdio.browserChoice.conf.js --spec ./testDownloadBehavior/example.js",
+    "testDownload:firefox": "cross-env BROWSER=firefox wdio run ./wdio.browserChoice.conf.js --spec ./testDownloadBehavior/example.js",
+    "testDownload:edge": "cross-env BROWSER=edge wdio run ./wdio.browserChoice.conf.js --spec ./testDownloadBehavior/example.js",
     "emulate": "cross-env EXAMPLE_RECIPE=emulate wdio run ./wdio.conf.js --spec ./emulate/example.js",
     "getting-started": "node ./getting-started/run-in-script.js",
     "keys": "cross-env EXAMPLE_RECIPE=keys wdio run ./wdio.conf.js --spec ./keys/keys.js",
@@ -56,6 +56,9 @@
     "selectors:ariaRole": "cross-env EXAMPLE_RECIPE=selectors wdio run ./wdio.conf.js --spec ./selectors/example.js --mochaOpts.grep 'by role attribute'",
     "selectors:js": "cross-env EXAMPLE_RECIPE=selectors wdio run ./wdio.conf.js --spec ./selectors/example.js --mochaOpts.grep 'js function'",
     "selectors:deep": "cross-env EXAMPLE_RECIPE=selectors wdio run ./wdio.conf.js --spec ./selectors/example.js --mochaOpts.grep 'deep selector'",
+    "selectorsAria": "run-s selectorsAria:*",
+    "selectorsAria:chrome": "cross-env EXAMPLE_RECIPE=selectorsAria BROWSER=chrome wdio run ./wdio.browserChoice.conf.js --spec ./selectorsAria/example.js --mochaOpts.timeout 90000",
+    "selectorsAria:firefox": "cross-env EXAMPLE_RECIPE=selectorsAria BROWSER=firefox wdio run ./wdio.browserChoice.conf.js --spec ./selectorsAria/example.js --mochaOpts.timeout 90000",
     "setup": "run-s setup:*",
     "setup:webdriver": "node ./setup/webdriver.js",
     "setup:devtools": "node ./setup/devtools.js",

selectorsAria/example.js

@@ -0,0 +1,17 @@
+import { browser, expect } from '@wdio/globals'
+
+describe('ARIA example on a larger page', () => {
+    before(() => browser.url('/stackoverflow.html'))
+
+    it('aria query for span=questions', async () => {
+        const el = await browser.$('aria/Questions')
+        const html = await el.getHTML()
+        expect(html).toBe('<span class="-link--channel-name pl8">Questions</span>')
+    })
+
+    it('aria query for button=Accept all cookies', async () => {
+        const el = await browser.$('aria/Accept all cookies')
+        const html = await el.getHTML()
+        expect(html).toBe('<button id="onetrust-accept-btn-handler">Accept all cookies</button>')
+    })
+})

selectorsAria/stackoverflow.html

@@ -1,15 +1,8 @@
 import fs from "fs"
-import path from "path"
-import {fileURLToPath} from "url"
-
-const __filename = fileURLToPath(import.meta.url)
-
-// Ensure that the download directory specified here
-// matches the directory you've set in capabilities.
-const downloadDirectory = path.dirname(__filename)
+import { downloadsDir } from "../wdio.browserChoice.conf"
 
 const expectedFileName = "package.json"
-const filePath = `${downloadDirectory}/${expectedFileName}`
+const filePath = `${downloadsDir}/${expectedFileName}`
 
 const deleteFileIfExists = () => {
     try {

testDownloadBehavior/helper.js

@@ -0,0 +1,82 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import fs from 'fs'
+import { config as baseConfig } from './wdio.conf.js'
+
+// Create downloads directory if it doesn't exist
+export const downloadsDir = path.join(path.dirname(fileURLToPath(import.meta.url)), 'downloads')
+if (!fs.existsSync(downloadsDir)){
+    fs.mkdirSync(downloadsDir);
+}
+
+// Get custom Firefox binary path from environment variable if set
+const { FIREFOX_BINARY_PATH } = process.env
+
+const chromeOptions = {
+    capabilities: {
+        browserName: 'chrome',
+        "goog:chromeOptions": {
+          args: process.env.CI ? ['headless', 'disable-gpu'] : ['disable-gpu'],
+            prefs: {
+                "download.default_directory": downloadsDir
+            }
+        }
+    }
+}
+
+const firefoxOptions = {
+    capabilities: {
+        browserName: 'firefox',
+        "moz:debuggerAddress": true,
+        "moz:firefoxOptions": {
+            args: process.env.CI ? ['-headless'] : [],
+            prefs: {
+                "browser.download.dir": downloadsDir,
+                "browser.download.folderList": 2,
+                "browser.download.manager.showWhenStarting": false,
+                "browser.helperApps.neverAsk.saveToDisk": "*/*"
+            }
+        }
+    }
+}
+
+// Set custom Firefox binary path if provided, e.g., for using Nightly or a specific version
+if (FIREFOX_BINARY_PATH) {
+  firefoxOptions.capabilities['moz:firefoxOptions'].binary = FIREFOX_BINARY_PATH;
+}
+
+const edgeOptions = {
+    capabilities: {
+        browserName: 'edge',
+        "ms:edgeOptions": {
+            args: process.env.CI ? ['--headless'] : [],
+            prefs: {
+                "download.default_directory": downloadsDir
+            }
+        }
+    }
+}
+
+const safariOptions = {
+    capabilities: {
+        browserName: 'safari'
+    }
+}
+
+const browserCapabilities = {
+    chrome: chromeOptions.capabilities,
+    firefox: firefoxOptions.capabilities,
+    edge: edgeOptions.capabilities,
+    safari: safariOptions.capabilities
+}
+
+const capabilities = [
+    process.env.BROWSER && browserCapabilities[process.env.BROWSER]
+        ? browserCapabilities[process.env.BROWSER]
+        : browserCapabilities['chrome']
+]
+
+export const config = {
+    ...baseConfig,
+    capabilities
+}