SAHI steps for attribute and class checking

Created by Arne Vandamme
Jul 14, 2015
3 min read

The current snapshot of CWB has been updated and includes some new steps that can be used for checking of HTML attributes and CSS classes.

An element can now be checked for the presence or absence of attributes, along with the set attribute value.  Additional steps are included for CSS class checking, that allow you to verify the presence of class names regardless of their order.

Favour the Javascript/DOM attribute names if possible. For instance: class is in fact className and for is htmlFor. In this case all four work, but when in doubt, always use the Javascript name.

Example overview attribute related steps
#
# Verifying attribute presence and attribute values.
#
  * table "resultTable" has attribute "id"
  * table 1 in div "container" should have attribute "className"
  * table "resultTable" in div "container" does not have attribute "data-item"
  * table "resultTable" should not have attribute "someother"
  * table "resultTable" has attribute "id" with value "resultTable"
  * table 1 in div "container" should have attribute "class" with value "/table-striped/"
  * table "resultTable" does not have attribute "className" with value "table-striped"
  * table 1 in div "container" should not have attribute "id" with value "/resultb/"
  * table "resultTable" should have the following attributes:
    | id        | resultTable                     |
    | className | /table-striped/                 |
    | id        |                                 |
    | className | table table-striped table-hover |
  * table 1 in div "container" has the following attributes:
    | id        |
    | className |
  * table 1 in div "container" does not have the following attributes:
    | for       |                  |
    | className | /notable/        |
    | id        | otherResultTable |
    | data-item |                  |
  * table "resultTable" should not have the following attributes:
    | data-item |
    | name      |
  
#
# Verifying CSS class presence.  In case of multiple classes, the order does not matter.
#
  * table "resultTable" should have class "table-striped"
  * table 1 in div "container" has class "table table-hover"
  * table "resultTable" does not have class "table-condensed"
  * table 1 in div "container" should not have class "has-error table"

See also the updated Language Reference for an overview.