protractor CSS Selectors
Syntax
- by.css('css-selector')
- by.id('id')
- by.model('model')
- by.binding('binding')
Parameters
| Parameter | Details |
|---|---|
| css-selector | A css selector like '.class-name' to select the element on the base of class name |
| 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 |
Remarks
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.by.css('.form-control')
Since the 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:
by.css('#email') -
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')
- Using tag name with other attributes : The general expression to write css selector using tag name and other attributes is
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']")
