Merge pull request #1309 from erwinheitzman/add-new-matchers

(expect-webdriverio): add new matchers

Author: erwinheitzman

__mocks__/@wdio/globals.ts

@@ -20,6 +20,18 @@ function getHTMLFn(includeSelectorTag) {
     return this._html ? this._html(includeSelectorTag) : undefined
 }
 
+function getComputedLabelFn() {
+    return this._computed_label ? this._computed_label() : undefined
+}
+
+function getComputedRoleFn() {
+    return this._computed_role ? this._computed_role() : undefined
+}
+
+function getSizeFn(property?: 'height' | 'width') {
+    return this._size ? this._size(property) : undefined
+}
+
 const element = {
     $,
     $$,
@@ -33,6 +45,9 @@ const element = {
     getProperty: getPropertyFn,
     getText: getTextFn,
     getHTML: getHTMLFn,
+    getComputedLabel: getComputedLabelFn,
+    getComputedRole: getComputedRoleFn,
+    getSize: getSizeFn,
 }
 
 export function $(selector) {

docs/API.md

@@ -349,6 +349,58 @@ const elem = await $('#elem')
 await expect(elem).toBeChecked()
 ```
 
+### toHaveComputedLabel
+
+Checks if element has a specific computed WAI-ARIA label. Can also be called with an array as parameter in the case where the element can have different labels.
+
+##### Usage
+
+```js
+await browser.url('https://webdriver.io/')
+const elem = await $('a[href="https://github.com/webdriverio/webdriverio"]')
+await expect(elem).toHaveComputedLabel('GitHub repository')
+await expect(elem).toHaveComputedLabel(['GitHub repository', 'Private repository'])
+```
+
+### toHaveComputedLabelContaining
+
+Checks if element contains a specific computed WAI-ARIA label. Can also be called with an array as parameter in the case where the element can have different labels.
+
+##### Usage
+
+```js
+await browser.url('https://webdriver.io/')
+const elem = await $('a[href="https://github.com/webdriverio/webdriverio"]')
+await expect(elem).toHaveComputedLabelContaining('GitHub')
+await expect(elem).toHaveComputedLabelContaining(['GitHub', 'Private'])
+```
+
+### toHaveComputedRole
+
+Checks if element has a specific computed WAI-ARIA role. Can also be called with an array as parameter in the case where the element can have different labels.
+
+##### Usage
+
+```js
+await browser.url('https://webdriver.io/')
+const elem = await $('[aria-label="Skip to main content"]')
+await expect(elem).toHaveComputedRole('region')
+await expect(elem).toHaveComputedRole(['region', 'section'])
+```
+
+### toHaveComputedRoleContaining
+
+Checks if element contains a specific computed WAI-ARIA role. Can also be called with an array as parameter in the case where the element can have different roles.
+
+##### Usage
+
+```js
+await browser.url('https://webdriver.io/')
+const elem = await $('[aria-label="Skip to main content"]')
+await expect(elem).toHaveComputedRoleContaining('reg')
+await expect(elem).toHaveComputedRoleContaining(['reg', 'sec'])
+```
+
 ### toHaveHref
 
 Checks if link element has a specific link target.
@@ -486,6 +538,42 @@ await expect(list).toHaveChildren(3) // the list has 3 items
 await expect(list).toHaveChildren({ eq: 3 })
 ```
 
+### toHaveWidth
+
+Checks if element has a specific width.
+
+##### Usage
+
+```js
+await browser.url('http://github.com')
+const logo = await $('.octicon-mark-github')
+await expect(logo).toHaveWidth(32)
+```
+
+### toHaveHeight
+
+Checks if element has a specific height.
+
+##### Usage
+
+```js
+await browser.url('http://github.com')
+const logo = await $('.octicon-mark-github')
+await expect(logo).toHaveHeight(32)
+```
+
+### toHaveSize
+
+Checks if element has a specific size.
+
+##### Usage
+
+```js
+await browser.url('http://github.com')
+const logo = await $('.octicon-mark-github')
+await expect(logo).toHaveSize({ width: 32, height: 32 })
+```
+
 ### toBeElementsArrayOfSize
 
 Checks amount of fetched elements using [`$$`](https://webdriver.io/docs/api/element/$$) command.

package-lock.json

@@ -60,6 +60,7 @@
   "devDependencies": {
     "@types/debug": "^4.1.8",
     "@types/jest": "^29.5.4",
+    "@types/lodash.isequal": "^4.5.6",
     "@types/node": "^20.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
@@ -84,6 +85,7 @@
   },
   "dependencies": {
     "expect": "^29.7.0",
-    "jest-matcher-utils": "^29.7.0"
+    "jest-matcher-utils": "^29.7.0",
+    "lodash.isequal": "^4.5.0"
   }
 }

package.json

@@ -0,0 +1,63 @@
+import {
+    waitUntil,
+    enhanceError,
+    compareText,
+    compareTextWithArray,
+    executeCommand,
+    wrapExpectedWithArray,
+    updateElementsArray,
+} from '../../utils.js'
+
+async function condition(
+    el: WebdriverIO.Element,
+    label: string | RegExp | Array<string | RegExp>,
+    options: ExpectWebdriverIO.HTMLOptions
+) {
+    const actualLabel = await el.getComputedLabel()
+    if (Array.isArray(label)) {
+        return compareTextWithArray(actualLabel, label, options)
+    }
+    return compareText(actualLabel, label, options)
+}
+
+export async function toHaveComputedLabel(
+    received: WebdriverIO.Element | WebdriverIO.ElementArray,
+    label: string | RegExp | Array<string | RegExp>,
+    options: ExpectWebdriverIO.StringOptions = {}
+) {
+    const isNot = this.isNot
+    const { expectation = 'computed label', verb = 'have' } = this
+
+    let el = await received
+    let actualLabel
+
+    const pass = await waitUntil(
+        async () => {
+            const result = await executeCommand.call(this, el, condition, options, [label, options])
+            el = result.el
+            actualLabel = result.values
+
+            return result.success
+        },
+        isNot,
+        options
+    )
+
+    updateElementsArray(pass, received, el)
+
+    const message = enhanceError(
+        el,
+        wrapExpectedWithArray(el, actualLabel, label),
+        actualLabel,
+        this,
+        verb,
+        expectation,
+        '',
+        options
+    )
+
+    return {
+        pass,
+        message: (): string => message,
+    }
+}

src/matchers/element/toHaveComputedLabel.ts

@@ -0,0 +1,8 @@
+import { toHaveComputedLabel } from './toHaveComputedLabel.js'
+
+export function toHaveComputedLabelContaining(el: WebdriverIO.Element, label: string | RegExp | Array<string | RegExp>, options: ExpectWebdriverIO.StringOptions = {}) {
+    return toHaveComputedLabel.call(this, el, label, {
+        ...options,
+        containing: true
+    })
+}

src/matchers/element/toHaveComputedLabelContaining.ts

@@ -0,0 +1,63 @@
+import {
+    waitUntil,
+    enhanceError,
+    compareText,
+    compareTextWithArray,
+    executeCommand,
+    wrapExpectedWithArray,
+    updateElementsArray,
+} from '../../utils.js'
+
+async function condition(
+    el: WebdriverIO.Element,
+    role: string | RegExp | Array<string | RegExp>,
+    options: ExpectWebdriverIO.HTMLOptions
+) {
+    const actualRole = await el.getComputedRole()
+    if (Array.isArray(role)) {
+        return compareTextWithArray(actualRole, role, options)
+    }
+    return compareText(actualRole, role, options)
+}
+
+export async function toHaveComputedRole(
+    received: WebdriverIO.Element | WebdriverIO.ElementArray,
+    role: string | RegExp | Array<string | RegExp>,
+    options: ExpectWebdriverIO.StringOptions = {}
+) {
+    const isNot = this.isNot
+    const { expectation = 'computed role', verb = 'have' } = this
+
+    let el = await received
+    let actualRole
+
+    const pass = await waitUntil(
+        async () => {
+            const result = await executeCommand.call(this, el, condition, options, [role, options])
+            el = result.el
+            actualRole = result.values
+
+            return result.success
+        },
+        isNot,
+        options
+    )
+
+    updateElementsArray(pass, received, el)
+
+    const message = enhanceError(
+        el,
+        wrapExpectedWithArray(el, actualRole, role),
+        actualRole,
+        this,
+        verb,
+        expectation,
+        '',
+        options
+    )
+
+    return {
+        pass,
+        message: (): string => message,
+    }
+}

src/matchers/element/toHaveComputedRole.ts

@@ -0,0 +1,8 @@
+import { toHaveComputedRole } from './toHaveComputedRole.js'
+
+export function toHaveComputedRoleContaining(el: WebdriverIO.Element, role: string | RegExp | Array<string | RegExp>, options: ExpectWebdriverIO.StringOptions = {}) {
+    return toHaveComputedRole.call(this, el, role, {
+        ...options,
+        containing: true
+    })
+}