|css-selector||A css selector like |
|id||Id of the dom element|
|model||Model used for dom element|
|binding||Name of the binding which is used to bound to certain element|
How to write css selectors?
The most important attributes to write css selectors are class and id of dom. For an instance if a html dom lookes like below example:
<form class="form-signin"> <input type="text" id="email" class="form-control" placeholder="Email"> <input type="password" id="password" class="form-control" placeholder="Password"> <button class="btn btn-block" id="signin-button" type="submit">Sign in</button> </form>
Then to select the email input field, you can write css selector in following way:
Using class name: The class name in css selector starts with special character .(dot). The css selector for that will be like this
form-control class is shared by both input elements so it raises a concern of duplicity in locators. So in such situation if id is available then you should always prefer to use id instead of class name.
Using ID: The id in css selector starts with special character # (hash). So the css selector using id for email input element will be written like below:
Using multiple class names: If dom element has multiple classes then you can with combination of classes as css selector. For example if dom element is like this:
<input class="username-class form-control"> // css selector using multiple classes by.css('.username-class.form-control')
tagname[attribute-type='attribute-vallue']. So following the expression the css locator for sign-in button can be formed like this:
by.css("button[type='submit']") //or by.css("button[id='signin-button']")