Zum Hauptinhalt springen

Expect

Beim Schreiben von Tests müssen Sie oft überprüfen, ob Werte bestimmte Bedingungen erfüllen. expect gibt Ihnen Zugriff auf eine Reihe von "Matchern", mit denen Sie verschiedene Dinge auf dem browser, einem element oder mock Objekt validieren können.

Standardoptionen​

Diese Standardoptionen unten sind mit den waitforTimeout und waitforInterval Optionen in der Konfiguration verbunden.

Setzen Sie die Optionen unten nur, wenn Sie für Ihre Assertions bestimmte Timeouts festlegen möchten.

{
wait: 2000, // ms to wait for expectation to succeed
interval: 100, // interval between attempts
}

Wenn Sie andere Timeouts und Intervalle wählen möchten, setzen Sie diese Optionen wie folgt:

// wdio.conf.js
import { setOptions } from 'expect-webdriverio'

export const config = {
// ...
before () {
setOptions({ wait: 5000 })
},
// ...
}

Matcher-Optionen​

Jeder Matcher kann mehrere Optionen annehmen, die es Ihnen ermöglichen, die Assertion zu modifizieren:

Befehlsoptionen​
NameTypeDetails
waitnumberZeit in ms, die gewartet werden soll, bis die Erwartung erfüllt ist. Standard: 3000
intervalnumberIntervall zwischen den Versuchen. Standard: 100
beforeAssertionfunctionFunktion, die vor der Assertion aufgerufen werden soll
afterAssertionfunctionFunktion, die nach der Assertion aufgerufen werden soll und die Assertionsergebnisse enthält
messagestringBenutzernachricht, die vor dem Assertionsfehler angezeigt werden soll
String-Optionen​

Diese Option kann zusätzlich zu den Befehlsoptionen angewendet werden, wenn Strings überprüft werden.

NameTypeDetails
ignoreCasebooleanwendet toLowerCase auf tatsächliche und erwartete Werte an
trimbooleanwendet trim auf den tatsächlichen Wert an
replaceReplacer | Replacer[]ersetzt Teile des tatsächlichen Wertes, die mit der Zeichenfolge/RegExp übereinstimmen. Der Replacer kann eine Zeichenfolge oder eine Funktion sein.
containingbooleanerwartet, dass der tatsächliche Wert den erwarteten Wert enthält, sonst streng gleich.
asStringbooleankann hilfreich sein, um die Eigenschaftswerte in Strings umzuwandeln
atStartbooleanerwartet, dass der tatsächliche Wert mit dem erwarteten Wert beginnt
atEndbooleanerwartet, dass der tatsächliche Wert mit dem erwarteten Wert endet
atIndexnumbererwartet, dass der tatsächliche Wert den erwarteten Wert an der angegebenen Position hat
Zahlenoptionen​

Diese Option kann zusätzlich zu den Befehlsoptionen angewendet werden, wenn Zahlen überprüft werden.

NameTypeDetails
eqnumbergleich
ltenumberkleiner oder gleich
gtenumbergrößer oder gleich

Umgang mit HTML-Entitäten​

Eine HTML-Entität ist ein Textstück ("string"), das mit einem Kaufmanns-Und (&) beginnt und mit einem Semikolon (;) endet. Entitäten werden häufig verwendet, um reservierte Zeichen (die sonst als HTML-Code interpretiert würden) und unsichtbare Zeichen (wie geschützte Leerzeichen, z.B.  ) anzuzeigen.

Um ein solches Element zu finden oder damit zu interagieren, verwenden Sie das Unicode-Äquivalent der Entität. z.B.:

<div data="Some&nbsp;Value">Some&nbsp;Text</div>
const myElem = await $('div[data="Some\u00a0Value"]')
await expect(myElem).toHaveAttribute('data', 'div[Some\u00a0Value')
await expect(myElem).toHaveText('Some\u00a0Text')

Alle Unicode-Referenzen finden Sie in der HTML-Spezifikation.

Hinweis: Unicode ist case-insensitive, daher funktionieren sowohl \u00a0 als auch \u00A0. Um ein Element im Browser zu finden, entfernen Sie u aus dem Unicode, z.B.: div[data="Some\00a0Value"]

Browser-Matcher​

toHaveUrl​

Prüft, ob der Browser sich auf einer bestimmten Seite befindet.

Verwendung​
await browser.url('https://webdriver.io/')
await expect(browser).toHaveUrl('https://webdriver.io')
Verwendung​
await browser.url('https://webdriver.io/')
await expect(browser).toHaveUrl(expect.stringContaining('webdriver'))

toHaveTitle​

Prüft, ob die Website einen bestimmten Titel hat.

Verwendung​
await browser.url('https://webdriver.io/')
await expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')
await expect(browser).toHaveTitle(expect.stringContaining('WebdriverIO'))

toHaveClipboardText​

Prüft, ob der Browser einen bestimmten Text in der Zwischenablage gespeichert hat.

Verwendung​
import { Key } from 'webdriverio'

await browser.keys([Key.Ctrl, 'a'])
await browser.keys([Key.Ctrl, 'c'])
await expect(browser).toHaveClipboardText('some clipboard text')
await expect(browser).toHaveClipboardText(expect.stringContaining('clipboard text'))

Element-Matcher​

toBeDisplayed​

Ruft isDisplayed für das gegebene Element auf.

Verwendung​
const elem = await $('#someElem')
await expect(elem).toBeDisplayed()

toExist​

Ruft isExisting für das gegebene Element auf.

Verwendung​
const elem = await $('#someElem')
await expect(elem).toExist()

toBePresent​

Gleich wie toExist.

Verwendung​
const elem = await $('#someElem')
await expect(elem).toBePresent()

toBeExisting​

Gleich wie toExist.

Verwendung​
const elem = await $('#someElem')
await expect(elem).toBeExisting()

toBeFocused​

Prüft, ob das Element den Fokus hat. Diese Assertion funktioniert nur in einem Web-Kontext.

Verwendung​
const elem = await $('#someElem')
await expect(elem).toBeFocused()

toHaveAttribute​

Prüft, ob ein Element ein bestimmtes Attribut mit einem bestimmten Wert hat.

Verwendung​
const myInput = await $('input')
await expect(myInput).toHaveAttribute('class', 'form-control')
await expect(myInput).toHaveAttribute('class', expect.stringContaining('control'))

toHaveAttr​

Gleich wie toHaveAttribute.

Verwendung​
const myInput = await $('input')
await expect(myInput).toHaveAttr('class', 'form-control')
await expect(myInput).toHaveAttr('class', expect.stringContaining('control'))

toHaveElementClass​

Prüft, ob ein Element einen einzelnen Klassennamen hat. Kann auch mit einem Array als Parameter aufgerufen werden, wenn das Element mehrere Klassennamen haben kann.

Verwendung​
const myInput = await $('input')
await expect(myInput).toHaveElementClass('form-control', { message: 'Not a form control!' })
await expect(myInput).toHaveElementClass(['form-control' , 'w-full'], { message: 'not full width' })
await expect(myInput).toHaveElementClass(expect.stringContaining('form'), { message: 'Not a form control!' })

toHaveElementProperty​

Prüft, ob ein Element eine bestimmte Eigenschaft hat.

Verwendung​
const elem = await $('#elem')
await expect(elem).toHaveElementProperty('height', 23)
await expect(elem).not.toHaveElementProperty('height', 0)

toHaveValue​

Prüft, ob ein Eingabeelement einen bestimmten Wert hat.

Verwendung​
const myInput = await $('input')
await expect(myInput).toHaveValue('admin-user', { ignoreCase: true })
await expect(myInput).toHaveValue(expect.stringContaining('user'), { ignoreCase: true })

toBeClickable​

Prüft, ob ein Element angeklickt werden kann, indem isClickable für das Element aufgerufen wird.

Verwendung​
const elem = await $('#elem')
await expect(elem).toBeClickable()

toBeDisabled​

Prüft, ob ein Element deaktiviert ist, indem isEnabled für das Element aufgerufen wird.

Verwendung​
const elem = await $('#elem')
await expect(elem).toBeDisabled()
// same as
await expect(elem).not.toBeEnabled()

toBeEnabled​

Prüft, ob ein Element aktiviert ist, indem isEnabled für das Element aufgerufen wird.

Verwendung​
const elem = await $('#elem')
await expect(elem).toBeEnabled()
// same as
await expect(elem).not.toBeDisabled()

toBeSelected​

Prüft, ob ein Element ausgewählt ist, indem isSelected für das Element aufgerufen wird.

Verwendung​
const elem = await $('#elem')
await expect(elem).toBeSelected()

toBeChecked​

Gleich wie toBeSelected.

Verwendung​
const elem = await $('#elem')
await expect(elem).toBeChecked()

toHaveComputedLabel​

Prüft, ob ein Element ein bestimmtes berechnetes WAI-ARIA-Label hat. Kann auch mit einem Array als Parameter aufgerufen werden, falls das Element verschiedene Labels haben kann.

Verwendung​
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(expect.stringContaining('repository'))
Verwendung​
await browser.url('https://webdriver.io/')
const elem = await $('a[href="https://github.com/webdriverio/webdriverio"]')
await expect(elem).toHaveComputedLabel(['GitHub repository', 'Private repository'])
await expect(elem).toHaveComputedLabel([expect.stringContaining('GitHub'), expect.stringContaining('Private')])

toHaveComputedRole​

Prüft, ob ein Element eine bestimmte berechnete WAI-ARIA-Rolle hat. Kann auch mit einem Array als Parameter aufgerufen werden, falls das Element verschiedene Labels haben kann.

Verwendung​
await browser.url('https://webdriver.io/')
const elem = await $('[aria-label="Skip to main content"]')
await expect(elem).toHaveComputedRole('region')
await expect(elem).toHaveComputedRole(expect.stringContaining('ion'))
Verwendung​
await browser.url('https://webdriver.io/')
const elem = await $('[aria-label="Skip to main content"]')
await expect(elem).toHaveComputedRole(['region', 'section'])
await expect(elem).toHaveComputedRole([expect.stringContaining('reg'), expect.stringContaining('sec')])

toHaveHref​

Prüft, ob ein Link-Element ein bestimmtes Link-Ziel hat.

Verwendung​
const link = await $('a')
await expect(link).toHaveHref('https://webdriver.io')
await expect(link).toHaveHref(expect.stringContaining('webdriver.io'))

Gleich wie toHaveHref.

Verwendung​
const link = await $('a')
await expect(link).toHaveLink('https://webdriver.io')
await expect(link).toHaveLink(expect.stringContaining('webdriver.io'))

toHaveId​

Prüft, ob ein Element ein bestimmtes id-Attribut hat.

Verwendung​
const elem = await $('#elem')
await expect(elem).toHaveId('elem')

toHaveText​

Prüft, ob ein Element einen bestimmten Text hat. Kann auch mit einem Array als Parameter aufgerufen werden, falls das Element verschiedene Texte haben kann.

Verwendung​
await browser.url('https://webdriver.io/')
const elem = await $('.container')
await expect(elem).toHaveText('Next-gen browser and mobile automation test framework for Node.js')
await expect(elem).toHaveText(expect.stringContaining('test framework for Node.js'))
await expect(elem).toHaveText(['Next-gen browser and mobile automation test framework for Node.js', 'Get Started'])
await expect(elem).toHaveText([expect.stringContaining('test framework for Node.js'), expect.stringContaining('Started')])

Für den Fall, dass sich in dem div unten eine Liste von Elementen befindet:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Sie können diese mit einem Array überprüfen:

const elem = await $$('ul > li')
await expect(elem).toHaveText(['Coffee', 'Tea', 'Milk'])

toHaveHTML​

Prüft, ob ein Element einen bestimmten Text hat. Kann auch mit einem Array als Parameter aufgerufen werden, falls das Element verschiedene Texte haben kann.

Verwendung​
await browser.url('https://webdriver.io/')
const elem = await $('.hero__subtitle')
await expect(elem).toHaveHTML('<p class="hero__subtitle">Next-gen browser and mobile automation test framework for Node.js</p>')
await expect(elem).toHaveHTML(expect.stringContaining('Next-gen browser and mobile automation test framework for Node.js'))
await expect(elem).toHaveHTML('Next-gen browser and mobile automation test framework for Node.js', { includeSelectorTag: false })
Verwendung​
await browser.url('https://webdriver.io/')
const elem = await $('.hero__subtitle')
await expect(elem).toHaveHTML(['Next-gen browser and mobile automation test framework for Node.js', 'Get Started'], { includeSelectorTag: false })
await expect(elem).toHaveHTML([expect.stringContaining('automation test framework for Node.js'), expect.stringContaining('Started')], { includeSelectorTag: false })

toBeDisplayedInViewport​

Prüft, ob ein Element innerhalb des Viewports ist, indem isDisplayedInViewport für das Element aufgerufen wird.

Verwendung​
const elem = await $('#elem')
await expect(elem).toBeDisplayedInViewport()

toHaveChildren​

Prüft die Anzahl der abgerufenen Kindelemente, indem der Befehl element.$('./*') aufgerufen wird.

Verwendung​
const list = await $('ul')
await expect(list).toHaveChildren() // the list has at least one item
// same as
await expect(list).toHaveChildren({ gte: 1 })

await expect(list).toHaveChildren(3) // the list has 3 items
// same as
await expect(list).toHaveChildren({ eq: 3 })

toHaveWidth​

Prüft, ob ein Element eine bestimmte Breite hat.

Verwendung​
await browser.url('http://github.com')
const logo = await $('.octicon-mark-github')
await expect(logo).toHaveWidth(32)

toHaveHeight​

Prüft, ob ein Element eine bestimmte Höhe hat.

Verwendung​
await browser.url('http://github.com')
const logo = await $('.octicon-mark-github')
await expect(logo).toHaveHeight(32)

toHaveSize​

Prüft, ob ein Element eine bestimmte Größe hat.

Verwendung​
await browser.url('http://github.com')
const logo = await $('.octicon-mark-github')
await expect(logo).toHaveSize({ width: 32, height: 32 })

toBeElementsArrayOfSize​

Prüft die Anzahl der abgerufenen Elemente mit dem $$ Befehl.

Hinweis: Dieser Matcher aktualisiert das übergebene Array mit den neuesten Elementen, wenn die Assertion erfolgreich ist. Wenn Sie die Variable jedoch neu zugewiesen haben, müssen Sie die Elemente erneut abrufen.

Verwendung​
const listItems = await $$('ul>li')
await expect(listItems).toBeElementsArrayOfSize(5) // 5 items in the list

await expect(listItems).toBeElementsArrayOfSize({ lte: 10 })
// same as
assert.ok(listItems.length <= 10)

Netzwerk-Matcher​

toBeRequested​

Prüft, ob ein Mock aufgerufen wurde

Verwendung​
const mock = browser.mock('**/api/todo*')
await expect(mock).toBeRequested()

toBeRequestedTimes​

Prüft, ob ein Mock für die erwartete Anzahl von Malen aufgerufen wurde

Verwendung​
const mock = browser.mock('**/api/todo*')
await expect(mock).toBeRequestedTimes(2) // await expect(mock).toBeRequestedTimes({ eq: 2 })

await expect(mock).toBeRequestedTimes({ gte: 5, lte: 10 }) // request called at least 5 times but less than 11

toBeRequestedWith​

Prüft, ob ein Mock entsprechend den erwarteten Optionen aufgerufen wurde.

Die meisten Optionen unterstützen expect/jasmine-Partial-Matcher wie expect.objectContaining

Verwendung​
const mock = browser.mock('**/api/todo*', { method: 'POST' })

await expect(mock).toBeRequestedWith({
url: 'http://localhost:8080/api/todo', // [optional] string | function | custom matcher
method: 'POST', // [optional] string | array
statusCode: 200, // [optional] number | array
requestHeaders: { Authorization: 'foo' }, // [optional] object | function | custom matcher
responseHeaders: { Authorization: 'bar' }, // [optional] object | function | custom matcher
postData: { title: 'foo', description: 'bar' }, // [optional] object | function | custom matcher
response: { success: true }, // [optional] object | function | custom matcher
})

await expect(mock).toBeRequestedWith({
url: expect.stringMatching(/.*\/api\/.*/i),
method: ['POST', 'PUT'], // either POST or PUT
statusCode: [401, 403], // either 401 or 403
requestHeaders: headers => headers.Authorization.startsWith('Bearer '),
postData: expect.objectContaining({ released: true, title: expect.stringContaining('foobar') }),
response: r => Array.isArray(r) && r.data.items.length === 20
})

Snapshot-Matcher​

WebdriverIO unterstützt sowohl grundlegende Snapshot-Tests als auch DOM-Snapshot-Tests.

toMatchSnapshot​

Prüft, ob ein beliebiges Objekt mit einem bestimmten Wert übereinstimmt. Wenn Sie ein WebdriverIO.Element übergeben, wird automatisch ein Snapshot des outerHTML Zustands erstellt.

Verwendung​
// snapshot arbitrary objects (no "await" needed here)
expect({ foo: 'bar' }).toMatchSnapshot()
// snapshot `outerHTML` of WebdriverIO.Element (DOM snapshot, requires "await")
await expect($('elem')).toMatchSnapshot()
// snapshot result of element command
await expect($('elem').getCSSProperty('background-color')).toMatchSnapshot()

toMatchInlineSnapshot​

Ähnlich können Sie toMatchInlineSnapshot() verwenden, um den Snapshot inline in der Testdatei zu speichern. Zum Beispiel:

await expect($('img')).toMatchInlineSnapshot()

Anstatt eine Snapshot-Datei zu erstellen, modifiziert WebdriverIO die Testdatei direkt, um den Snapshot als String zu aktualisieren:

await expect($('img')).toMatchInlineSnapshot(`"<img src="/public/apple-touch-icon-precomposed.png">"`)

Visuelle Snapshot-Matcher​

Die folgenden Matcher sind als Teil des @wdio/visual-service-Plugins implementiert und nur verfügbar, wenn der Service eingerichtet ist. Stellen Sie sicher, dass Sie die Einrichtungsanweisungen entsprechend befolgen.

toMatchElementSnapshot​

Prüft, ob das gegebene Element mit dem Snapshot der Baseline übereinstimmt.

Verwendung​
await expect($('.hero__title-logo')).toMatchElementSnapshot('wdioLogo', 0, {
// options
})

Das erwartete Ergebnis ist standardmäßig 0, so dass Sie die gleiche Assertion wie folgt schreiben können:

await expect($('.hero__title-logo')).toMatchElementSnapshot('wdioLogo', {
// options
})

oder überhaupt keine Optionen übergeben:

await expect($('.hero__title-logo')).toMatchElementSnapshot()

toMatchScreenSnapshot​

Prüft, ob der aktuelle Bildschirm mit dem Snapshot der Baseline übereinstimmt.

Verwendung​
await expect(browser).toMatchScreenSnapshot('partialPage', 0, {
// options
})

Das erwartete Ergebnis ist standardmäßig 0, so dass Sie die gleiche Assertion wie folgt schreiben können:

await expect(browser).toMatchScreenSnapshot('partialPage', {
// options
})

oder überhaupt keine Optionen übergeben:

await expect(browser).toMatchScreenSnapshot('partialPage')

toMatchFullPageSnapshot​

Prüft, ob der vollständige Seitenscreenshot mit dem Snapshot der Baseline übereinstimmt.

Verwendung​
await expect(browser).toMatchFullPageSnapshot('fullPage', 0, {
// options
})

Das erwartete Ergebnis ist standardmäßig 0, so dass Sie die gleiche Assertion wie folgt schreiben können:

await expect(browser).toMatchFullPageSnapshot('fullPage', {
// options
})

oder überhaupt keine Optionen übergeben:

await expect(browser).toMatchFullPageSnapshot('fullPage')

toMatchTabbablePageSnapshot​

Prüft, ob der vollständige Seitenscreenshot einschließlich Tab-Markierungen mit dem Snapshot der Baseline übereinstimmt.

Verwendung​
await expect(browser).toMatchTabbablePageSnapshot('tabbable', 0, {
// options
})

Das erwartete Ergebnis ist standardmäßig 0, so dass Sie die gleiche Assertion wie folgt schreiben können:

await expect(browser).toMatchTabbablePageSnapshot('tabbable', {
// options
})

oder überhaupt keine Optionen übergeben:

await expect(browser).toMatchTabbablePageSnapshot('tabbable')

Verwendung von regulären Ausdrücken​

Sie können auch direkt reguläre Ausdrücke für alle Matcher verwenden, die Textvergleiche durchführen.

Verwendung​
await browser.url('https://webdriver.io/')
const elem = await $('.container')
await expect(elem).toHaveText(/node\.js/i)
await expect(elem).toHaveText([/node\.js/i, 'Get Started'])
await expect(browser).toHaveTitle(/webdriverio/i)
await expect(browser).toHaveUrl(/webdriver\.io/)
await expect(elem).toHaveElementClass(/Container/i)

Standard-Matcher​

Zusätzlich zu den expect-webdriverio-Matchern können Sie die eingebauten expect-Assertions von Jest oder expect/expectAsync für Jasmine verwenden.

Asymmetrische Matcher​

WebdriverIO unterstützt die Verwendung von asymmetrischen Matchern überall dort, wo Sie Textwerte vergleichen, z.B.:

await expect(browser).toHaveTitle(expect.stringContaining('some title'))

oder

await expect(browser).toHaveTitle(expect.not.stringContaining('some title'))

TypeScript​

Wenn Sie den WDIO Testrunner verwenden, wird alles automatisch eingerichtet. Folgen Sie einfach der Einrichtungsanleitung aus der Dokumentation. Wenn Sie WebdriverIO jedoch mit einem anderen Testrunner oder in einem einfachen Node.js-Skript ausführen, müssen Sie expect-webdriverio zu types in der tsconfig.json hinzufügen.

  • "expect-webdriverio" für alle außer Jasmine/Jest-Benutzer.
  • "expect-webdriverio/jasmine" für Jasmine
  • "expect-webdriverio/jest" für Jest

JavaScript (VSCode)​

Es ist erforderlich, eine jsconfig.json im Projektstamm zu erstellen und auf die Typdefinitionen zu verweisen, damit die automatische Vervollständigung in Vanilla-JS funktioniert.

{
"include": [
"**/*.js",
"**/*.json",
"node_modules/expect-webdriverio"
]
}

Hinzufügen eigener Matcher​

Ähnlich wie expect-webdriverio die Jasmine/Jest-Matcher erweitert, ist es möglich, eigene Matcher hinzuzufügen.

Benutzerdefinierte Matcher sollten im wdio before-Hook hinzugefügt werden

// wdio.conf.js
{
async before () {
const { addCustomMatchers } = await import('./myMatchers')
addCustomMatchers()
}
}
// myMatchers.js - Jest example
export function addCustomMatchers () {
if (global.expect.expect !== undefined) { // Temporary workaround. See https://github.com/webdriverio/expect-webdriverio/issues/835
global.expect = global.expect.expect;
}

expect.extend({
myMatcher (actual, expected) {
return { pass: actual === expected, message: () => 'some message' }
}
})
}

Welcome! How can I help?

WebdriverIO AI Copilot