Table of Contents
- assert.dom()
- DOMAssertions
- exists
- doesNotExist
- isChecked
- isNotChecked
- isFocused
- isNotFocused
- isRequired
- isNotRequired
- isVisible
- isNotVisible
- hasAttribute
- doesNotHaveAttribute
- hasProperty
- isDisabled
- isNotDisabled
- hasClass
- doesNotHaveClass
- hasText
- hasAnyText
- hasNoText
- includesText
- doesNotIncludeText
- hasValue
- hasAnyValue
- hasNoValue
- matchesSelector
- doesNotMatchSelector
- hasTagName
- doesNotHaveTagName
- hasStyle
- hasPseudoElementStyle
- doesNotHaveStyle
- doesNotHavePseudoElementStyle
assert.dom()
Once installed the DOM element assertions are available at assert.dom(...).*:
Parameters
target(string | HTMLElement) A CSS selector that can be used to find elements usingquerySelector(), or an [HTMLElement][] (Not all assertions support both target types.) (optional, defaultrootElementordocument)rootElementHTMLElement? The root element of the DOM in which to search for thetarget(optional, defaultdocument)
Examples
test('the title exists', function(assert) {
assert.dom('#title').exists();
});DOMAssertions
exists
- See: #doesNotExist
Assert an HTMLElement (or multiple) matching the selector exists.
Parameters
Examples
assert.dom('#title').exists();
assert.dom('.choice').exists({ count: 4 });doesNotExist
- See: #exists
Assert an HTMLElement matching the selector does not exists.
Parameters
messagestring?
Examples
assert.dom('.should-not-exist').doesNotExist();isChecked
- See: #isNotChecked
Assert that the HTMLElement or an HTMLElement matching the
selector is currently checked.
Note: This also supports aria-checked="true/false".
Parameters
messagestring?
Examples
assert.dom('input.active').isChecked();isNotChecked
- See: #isChecked
Assert that the HTMLElement or an HTMLElement matching the
selector is currently unchecked.
Note: This also supports aria-checked="true/false".
Parameters
messagestring?
Examples
assert.dom('input.active').isNotChecked();isFocused
- See: #isNotFocused
Assert that the HTMLElement or an HTMLElement matching the
selector is currently focused.
Parameters
messagestring?
Examples
assert.dom('input.email').isFocused();isNotFocused
- See: #isFocused
Assert that the HTMLElement or an HTMLElement matching the
selector is not currently focused.
Parameters
messagestring?
Examples
assert.dom('input[type="password"]').isNotFocused();isRequired
- See: #isNotRequired
Assert that the HTMLElement or an HTMLElement matching the
selector is currently required.
Parameters
messagestring?
Examples
assert.dom('input[type="text"]').isRequired();isNotRequired
- See: #isRequired
Assert that the HTMLElement or an HTMLElement matching the
selector is currently not required.
Parameters
messagestring?
Examples
assert.dom('input[type="text"]').isNotRequired();isVisible
- See: #isNotVisible
Assert that the HTMLElement or an HTMLElement matching the
selector exists and is visible.
Visibility is determined by asserting that:
- the element's offsetWidth and offsetHeight are non-zero
- any of the element's DOMRect objects have a non-zero size
Additionally, visibility in this case means that the element is visible on the page, but not necessarily in the viewport.
Parameters
Examples
assert.dom('#title').isVisible();
assert.dom('.choice').isVisible({ count: 4 });isNotVisible
- See: #isVisible
Assert that the HTMLElement or an HTMLElement matching the
selector does not exist or is not visible on the page.
Visibility is determined by asserting that:
- the element's offsetWidth or offsetHeight are zero
- all of the element's DOMRect objects have a size of zero
Additionally, visibility in this case means that the element is visible on the page, but not necessarily in the viewport.
Parameters
messagestring?
Examples
assert.dom('.foo').isNotVisible();hasAttribute
Assert that the HTMLElement has an attribute with the provided name
and optionally checks if the attribute value matches the provided text
or regular expression.
Parameters
Examples
assert.dom('input.password-input').hasAttribute('type', 'password');doesNotHaveAttribute
- See: #hasAttribute
Assert that the HTMLElement has no attribute with the provided name.
Aliases: hasNoAttribute, lacksAttribute
Parameters
Examples
assert.dom('input.username').hasNoAttribute('disabled');hasProperty
- See: #doesNotHaveProperty
Assert that the HTMLElement has a property with the provided name
and checks if the property value matches the provided text or regular
expression.
Parameters
Examples
assert.dom('input.password-input').hasAttribute('type', 'password');isDisabled
- See: #isNotDisabled
Assert that the HTMLElement or an HTMLElement matching the
selector is disabled.
Parameters
messagestring?
Examples
assert.dom('.foo').isDisabled();isNotDisabled
- See: #isDisabled
Assert that the HTMLElement or an HTMLElement matching the
selector is not disabled.
Parameters
messagestring?
Examples
assert.dom('.foo').isNotDisabled();hasClass
- See: #doesNotHaveClass
Assert that the HTMLElement has the expected CSS class using
classList.
expected can also be a regular expression, and the assertion will return
true if any of the element's CSS classes match.
Parameters
Examples
assert.dom('input[type="password"]').hasClass('secret-password-input');assert.dom('input[type="password"]').hasClass(/.*password-input/);doesNotHaveClass
- See: #hasClass
Assert that the HTMLElement does not have the expected CSS class using
classList.
expected can also be a regular expression, and the assertion will return
true if none of the element's CSS classes match.
Aliases: hasNoClass, lacksClass
Parameters
Examples
assert.dom('input[type="password"]').doesNotHaveClass('username-input');assert.dom('input[type="password"]').doesNotHaveClass(/username-.*-input/);hasText
- See: #includesText
Assert that the text of the HTMLElement or an HTMLElement
matching the selector matches the expected text, using the
textContent
attribute and stripping/collapsing whitespace.
expected can also be a regular expression.
Note: This assertion will collapse whitespace if the type you pass in is a string. If you are testing specifically for whitespace integrity, pass your expected text in as a RegEx pattern.
Aliases: matchesText
Parameters
Examples
// <h2 id="title">
// Welcome to <b>QUnit</b>
// </h2>
assert.dom('#title').hasText('Welcome to QUnit');assert.dom('.foo').hasText(/[12]\d{3}/);hasAnyText
- See: #hasText
Assert that the textContent property of an HTMLElement is not empty.
Parameters
messagestring?
Examples
assert.dom('button.share').hasAnyText();hasNoText
- See: #hasNoText
Assert that the textContent property of an HTMLElement is empty.
Parameters
messagestring?
Examples
assert.dom('div').hasNoText();includesText
- See: #hasText
Assert that the text of the HTMLElement or an HTMLElement
matching the selector contains the given text, using the
textContent
attribute.
Note: This assertion will collapse whitespace in
textContentbefore searching. If you would like to assert on a string that should contain line breaks, tabs, more than one space in a row, or starting/ending whitespace, use the #hasText selector and pass your expected text in as a RegEx pattern.
Aliases: containsText, hasTextContaining
Parameters
Examples
assert.dom('#title').includesText('Welcome');doesNotIncludeText
Assert that the text of the HTMLElement or an HTMLElement
matching the selector does not include the given text, using the
textContent
attribute.
Aliases: doesNotContainText, doesNotHaveTextContaining
Parameters
Examples
assert.dom('#title').doesNotIncludeText('Welcome');hasValue
- See: #hasAnyValue
- See: #hasNoValue
Assert that the value property of an HTMLInputElement matches
the expected text or regular expression.
If no expected value is provided, the assertion will fail if the
value is an empty string.
Parameters
Examples
assert.dom('input.username').hasValue('HSimpson');hasAnyValue
- See: #hasValue
- See: #hasNoValue
Assert that the value property of an HTMLInputElement is not empty.
Parameters
messagestring?
Examples
assert.dom('input.username').hasAnyValue();hasNoValue
- See: #hasValue
- See: #hasAnyValue
Assert that the value property of an HTMLInputElement is empty.
Aliases: lacksValue
Parameters
messagestring?
Examples
assert.dom('input.username').hasNoValue();matchesSelector
Assert that the target selector selects only Elements that are also selected by compareSelector.
Parameters
Examples
assert.dom('p.red').matchesSelector('div.wrapper p:last-child')doesNotMatchSelector
Assert that the target selector selects only Elements that are not also selected by compareSelector.
Parameters
Examples
assert.dom('input').doesNotMatchSelector('input[disabled]')hasTagName
Assert that the tagName of the HTMLElement or an HTMLElement
matching the selector matches the expected tagName, using the
tagName
property of the HTMLElement.
Parameters
Examples
// <h1 id="title">
// Title
// </h1>
assert.dom('#title').hasTagName('h1');doesNotHaveTagName
Assert that the tagName of the HTMLElement or an HTMLElement
matching the selector does not match the expected tagName, using the
tagName
property of the HTMLElement.
Parameters
Examples
// <section id="block">
// Title
// </section>
assert.dom('section#block').doesNotHaveTagName('div');hasStyle
- See: #hasClass
Assert that the [HTMLElement][] has the expected style declarations using
window.getComputedStyle.
Parameters
Examples
assert.dom('.progress-bar').hasStyle({
opacity: 1,
display: 'block'
});hasPseudoElementStyle
- See: #hasClass
Assert that the pseudo element for selector of the [HTMLElement][] has the expected style declarations using
window.getComputedStyle.
Parameters
Examples
assert.dom('.progress-bar').hasPseudoElementStyle(':after', {
content: '";"',
});doesNotHaveStyle
- See: #hasClass
Assert that the [HTMLElement][] does not have the expected style declarations using
window.getComputedStyle.
Parameters
Examples
assert.dom('.progress-bar').doesNotHaveStyle({
opacity: 1,
display: 'block'
});doesNotHavePseudoElementStyle
- See: #hasClass
Assert that the pseudo element for selector of the [HTMLElement][] does not have the expected style declarations using
window.getComputedStyle.
Parameters
Examples
assert.dom('.progress-bar').doesNotHavePseudoElementStyle(':after', {
content: '";"',
});