Selectors (CSS

 CSS Selectors

Selector là gì nhỉ, như bạn thấy đây trên web bạn sẽ thấy những label, field ... để hiển thị hoặc nhập thông tin được gọi là các element, thì selector được hiểu như là địa chỉ của các element đó.

How to locate an element on the page, You can identify elements in the content of the web application by Id, Name, Xpath, Link Text, DOM, CSS.

The order to identify an element locator:

 1. find the "id" attribute that are not dynamic

 2. find the unique "name" attribute

 3. find the other possible unique attributes that are not dynamic

 4. If none of the attributes satisfies 1 -> 3, use any other element on the page that has static attributes with the parent/child/sibling relations to locate 

With 3 and 4, in order to unify the way to locate elements in test scripts, we should choose only one type: xpath or css (not use both of them in your scripts, except some special cases)

 id => #id_name

 class => .class_name

1. Using Absolute Path

   You should use > sign to reach an element directly.  (Note: For XPath, we use / sign for this.)

   ex: form>div>input

2. Using Non-Absolute Path

   You should use white space between tags to locate the element. Use "." for class and "#" for id.

   ex: form .form-group #user-message

3. Using Tag Name

   You can write the tag name directly like "form", "div", "img","body", etc. As below figure,

   I wrote the "form" tag to locate the form element.(Note: For XPath we use //tagname for this.)

   ex: form

4. Using Tag & Attribute & Value Trio

   You can use tag[attribute='value'] syntax.

   (Note: For XPath we use tag[@attribute='value'] for this.)

   ex: input[id='user-message']

5. Using Containing Text of an Attribute

   You can use tag[attribute*='containing text'] syntax.

   (Note: For XPath we use tag[contains((@attribute,'containing text')] for this.)

   ex: input[id*='er-messa']

6. Using Starting Text of an Attribute

   You can use tag[attribute^='starting text'] syntax.

   (Note: For XPath we use  tag[starts-with( @attribute, ‘starting text')] for this.)

   ex: input[id^='user']

7. Using Ending Text of an Attribute

   You can use tag[attribute$='ending text'] syntax.

   ex: input[id$='message']

8. Using Comma Operator to Implement OR Operation

   You can use "," operator between two CSS locator statements.

   ex: form#get-input,input#user-message

9. Using Tag and ID

   You can use "Tag#ID"

   ex: input#user-message

10. Using Tag and Class

    You can use "Tag.Class"

    ex: input.form-control

11. Using first-of-type

    You can use "Tag:first-of-type". It will select the first tag element.

    ex: tree-branch>ul>li:first-of-type

12. Using last-of-type

    You can use "Tag:last-of-type". It will select the last tag element.

    ex: .tree-branch>ul>li:last-of-type

    Note: If you want to find the last element or child you can use the below locators.

    ex:

    Tag:nth-last-of-type(n)

    Tag:nth-last-child(n)

13. Using *:last-of-type

    You can use "*last-of-type". It will select the last child of the parent tag.

    ex: .tree-branch>ul>*:last-of-type

14. Using tag:nth-of-type(n)

    You can use "tag:nth-of-type(n)". It will select the nth tag element of the list.

    ex: .tree-branch>ul>li:nth-of-type(3)

15. Using tag:nth-child(n)

    You can use "tag:nth-child(n)". It will select the nth child.

    ex: .tree-branch>ul>li:nth-child(3)

16. Using Sibling "+" Operator

    You can use "E1+ E2". First, it finds E1 and then selects E2.

    ex: li#mercedes + li

17. Exclude a CSS Class Name

    You can exclude any of the class names with :not(.class-name) syntax.

    ex: .btn.btn-info.pull-right:not(.xs-mt-0)

ref: https://www.swtestacademy.com/css-selenium/