Asserts that an element has (or does not have) a specific CSS property with a given value. The first parameter identifies the element by id, class, name, label, tag, or CSS selector; the second is a CSS declaration written as property: value (a trailing semicolon is allowed and ignored). The step waits up to 10 seconds for the element to appear, then compares the expected value against the element's computed style.
Color values are normalized before comparison, so white, #fff, and rgb(255, 255, 255) all match each other. Shorthand values such as solid 5px red are compared token by token against the computed property, so token order does not have to match exactly. Note the gotcha: because the comparison uses computed styles, values inherited from stylesheets count, not only inline styles.
Accepted phrasings
Then the "element" element should contain "property: value;"
Then "element" element should contain "property: value;"
Then the "element" element should not contain "property: value;"
Then "element" element should not contain "property: value;"Examples
Then the "body" element should contain "color:white;"
Then the "body" element should not contain "color:white;"
Then the "#uname" element should not contain "border:solid 5px red;"
Then the "pword" element should not contain "font-size: 26px;"In a real scenario
Feature: Login form styling
Scenario: The login form uses the approved theme styles
When I go to "https://example.org/login"
And wait 2s
Then I should see "Sign in"
And the "body" element should contain "color:white;"
And the "#uname" element should not contain "border:solid 5px red;"
When I fill in "wrong-user" for "uname"
And I press "Sign in"
Then the "#uname" element should contain "border:solid 5px red;"