Elements

DrevOps\BehatSteps\Steps\Web\ElementTrait - Source, Example, Helpers

Interact with HTML elements using CSS selectors and DOM attributes.

• Assert element visibility, attribute values, and viewport positioning.
• Execute JavaScript-based interactions with element state verification.
• Handle confirmation dialogs and scrolling operations.
• A top offset of N pixels scrolls the top of the element to N pixels below the top of the viewport. A negative offset scrolls it above the viewport.

Options

Option	Type	Default	Tag	Description
element.scroll_into_view_center	boolean	TRUE	-	Center an element in the viewport when scrolling to it, rather than aligning it to the top.

Steps

@Given I accept all confirmation dialogs

Accept confirmation dialogs appearing on the page

Given I accept all confirmation dialogs

@Given I decline all confirmation dialogs

Do not accept confirmation dialogs appearing on the page

Given I decline all confirmation dialogs

@When I click on the element :selector

Click on the element defined by the selector

When I click on the element ".button"

@When I click on the element :selector with the index :index

Click on the element at the 1-based index among all selector matches

When I click on the element ".card" with the index 2

@When I follow the link :link with the index :index

Follow the link at the 1-based index among all links with the text

When I follow the link "Read more" with the index 2

@When I press the button :button with the index :index

Press the button at the 1-based index among all buttons with the label

When I press the button "Delete" with the index 2

@When the JS event :event is triggered on the element :selector

Trigger a JS event on the element defined by the selector

When the JS event "click" is triggered on the element "#submit-button"

@When I scroll to the element :selector

Scroll to the element matching a CSS selector

When I scroll to the element "#footer"

@When I hover over the element :selector

Hover over an element identified by CSS selector

When I hover over the element ".menu-item"
When I hover over the element "#tooltip-trigger"

@When I focus on the element :selector

Focus on an element by CSS selector

When I focus on the element "#edit-name"
When I focus on the element ".form-text"

@Then I should see the heading :heading

Assert that a heading with the text exists

Then I should see the heading "Latest news"

@Then I should not see the heading :heading

Assert that no heading with the text exists

Then I should not see the heading "Admin"

@Then I should see the button :button

Assert that a button exists

Then I should see the button "Save"

@Then I should not see the button :button

Assert that a button does not exist

Then I should not see the button "Delete"

@Then the element :selector1 should appear after the element :selector2

Assert that one element appears after another on the page

Then the element "body" should appear after the element "head"

@Then I should see the text :text1 after the text :text2

Assert that one text string appears after another on the page

Then I should see the text "Welcome" after the text "Home"

@Then the element :selector with the attribute :attribute and the value :value should exist

Assert an element with selector and attribute with a value exists

Then the element "#main-content" with the attribute "class" and the value "content-wrapper" should exist

@Then the element :selector with the attribute :attribute and a value containing :partial_value should exist

Assert an element with selector and attribute containing a value exists

Then the element "#main-content" with the attribute "class" and a value containing "content" should exist

@Then the element :selector with the attribute :attribute and the value :value should not exist

Assert an element with selector and attribute with a value does not exist

Then the element "#main-content" with the attribute "class" and the value "hidden" should not exist

@Then the element :selector with the attribute :attribute and a value containing :partial_value should not exist

Assert an element with selector and attribute containing a value does not exist

Then the element "#main-content" with the attribute "class" and a value containing "hidden" should not exist

@Then the element :selector should have the CSS property :property with the value :value

Assert an element has a computed CSS property with a value

Then the element ".button" should have the CSS property "background-color" with the value "rgb(0, 0, 255)"

@Then the element :selector should have the CSS property :property with a value containing :partial_value

Assert an element has a computed CSS property containing a value

Then the element ".card" should have the CSS property "box-shadow" with a value containing "rgb(0, 0, 0)"

@Then the element :selector should not have the CSS property :property with the value :value

Assert an element does not have a computed CSS property with a value

Then the element ".button" should not have the CSS property "display" with the value "none"

@Then the element :selector should not have the CSS property :property with a value containing :partial_value

Assert an element does not have a computed CSS property containing a value

Then the element ".card" should not have the CSS property "box-shadow" with a value containing "inset"

@Then the element :selector1 should stack above the element :selector2

Assert that one element stacks above another

Then the element "#modal" should stack above the element "#page-header"

@Then the element :selector1 should stack below the element :selector2

Assert that one element stacks below another

Then the element "#page-header" should stack below the element "#modal"

@Then the element :selector should be at the top of the viewport

Assert that the element is at the top of the viewport

Then the element "#header" should be at the top of the viewport

@Then the element :selector should be centered in the viewport

Assert that the element is centered in the viewport

Then the element "#content" should be centered in the viewport

@Then the element :selector should be pinned to the top of the viewport

Assert that an element is pinned to the top of the viewport

When I scroll to the element "#footer"
Then the element "#header" should be pinned to the top of the viewport

@Then the element :selector should be pinned to the top of the viewport within :tolerance pixels

Assert that an element is pinned to the top of the viewport within a tolerance

Then the element "#header" should be pinned to the top of the viewport within 10 pixels

@Then the element :selector should not be pinned to the top of the viewport

Assert that an element is not pinned to the top of the viewport

When I scroll to the element "#footer"
Then the element "#header" should not be pinned to the top of the viewport

@Then the element :selector should have keyboard focus

Assert that the element has keyboard focus

Then the element "#edit-name" should have keyboard focus

@Then the element :selector should not have keyboard focus

Assert that the element does not have keyboard focus

Then the element "#edit-name" should not have keyboard focus

@Then the element :selector should have a visible focus outline

Assert that the element has a visible focus indicator

Then the element "#edit-name" should have a visible focus outline

@Then the element :selector should not have a visible focus outline

Assert that the element does not have a visible focus indicator

Then the element "#decorative-icon" should not have a visible focus outline

@Then the element :selector should be displayed

Assert that element with specified CSS is visible on page

Then the element ".alert-success" should be displayed

@Then the element :selector should not be displayed

Assert that element with specified CSS is not visible on page

Then the element ".error-message" should not be displayed

@Then the element :selector should be displayed within the viewport

Assert that element with specified CSS is displayed within the viewport

Then the element ".hero-banner" should be displayed within the viewport

@Then the element :selector should be displayed within the viewport with a top offset of :offset pixels

Assert that element with specified CSS is displayed within the viewport with a top offset

Then the element "#main-content" should be displayed within the viewport with a top offset of 80 pixels
Then the element ".sticky-header" should be displayed within the viewport with a top offset of -200 pixels

@Then the element :selector should not be displayed within the viewport with a top offset of :offset pixels

Assert that element with specified CSS is not displayed within the viewport with a top offset

Then the element ".announcement-bar" should not be displayed within the viewport with a top offset of -200 pixels

@Then the element :selector should not be displayed within the viewport

Assert that element with specified CSS is visually hidden on page

Then the element ".visually-hidden" should not be displayed within the viewport

@Then the element :parent should have :count element(s) matching :selector

Assert the number of elements matching a selector within a parent element

Then the element "#main-nav" should have 3 elements matching ".menu-item"