Css Selector

07:45    

    Css Selector in Selenium



    I. Css Selector in Selenium

    Class : In CSS we mention class using the . sign

    Html Code : <label class='expand'>css class</label>

Css selector value : .expand
Css selector value : label[class='expand']

    Id : CSS selector uses # sign with id attribute to locate the element

    Html Code : <label id='fourth'>css id</label>

Css selector value : #fourth

    Tagname : Tagname is used to form the element in HTML, we can use tagname without any symbols,

    Html Code : <label id='fourth'>css id</label>

Css selector value : label

    Combination : Sometimes there will scenarios where you may not able to find the element uniquely, in those cases we have to take the references of its parent element properties

    Html Code : <div id='abc' class='column'>
				      <label id='fourth' class='expand'>css id</label>
			      </div>

Css with class : .column.expand
Css with id : .abc.fourth
Css with tagname : div label
Css with mix 1: div.column#fourth
Css with mix 1: #abc label.expand

    II. The wild card in the CSS selector

    We can use wild card characters in CSS selector to find the element, ^, $, * are wild card characters present in the CSS selector in selenium

    <label name='example'>css selector</label>


    '^' means start of the string : label[name^='ex']

    '$' means the end of the string : label[name$='le']

    '*' means contain the string : label[name*='mp']


    III. CSS Selector Cheat Sheet


    SyntaxExample    Description
    .class.intro    Selects all elements with class="intro"
    #id#firstname    Selects the element with id="firstname"
    **    Selects all elements
    elementp    Selects all <p> elements
    element,elementdiv, p    Selects all <div> elements and all <p> elements
    element elementdiv p    Selects all <p> elements inside <div> elements
    element>elementdiv > p    Selects all <p> elements where the parent is a <div> element
    element+elementdiv + p    Selects all <p> elements that are placed immediately after <div> elements
    element1~element2p ~ ul    Selects every <ul> element that are preceded by a <p> element



    Read More

    Xpath

    08:47    

       Xpath in SeleniumWebDriver



      I. Xpath là gì?

      - Xpath (XML Path) - an expression that is used to find element in the XML document. In the Selenium, it's a technique to navigate through HTML structure to locate element.

      Ex:


                                           //input[@id='email']

      <?xml version="1.0" encoding="UTF-8"?>

      <bookstore>

      <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
      </book>

      <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
      </book>

      <book category="web">
        <title lang="en">XQuery Kick Start</title>
        <author>James McGovern</author>
        <author>Per Bothner</author>
        <author>Kurt Cagle</author>
        <author>James Linn</author>
        <author>Vaidyanathan Nagarajan</author>
        <year>2003</year>
        <price>49.99</price>
      </book>

      <book category="web">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
      </book>

      </bookstore>

      II. Xpath structure

      III. Xpath types

      3.1 Absolute xpath

      - Any small changes in path of the element that can make xpath failed.

      <html>
<head>...</head>
<body>
...
<form id="loginForm">
<input name="name" type="text" value="First Name" />
<input name="name" type="text" value="Last Name" />
<input name="email" type="text" value="Business Email" />
<input name="password" type="password" />
<input name="continue" type="submit" value="Sign Me Up" />
</form>
</body>
</html>
      html/body/form/input[3]

      3.2 Relative xpath

      - Element to be searched at anywhere in HTML.
      - The element path is easy to catch up and understand.
      //form/input[3]

      IV. Priority using Xpath

      1. Unique: The value of attribute must be unique.
      2. Meaning: The value attribute of the field must have meaning.
      3. Attribute: Prioritize these tags: id/class/name.








      Read More
      Đăng ký: Bài đăng (Atom)