Saturday 23 July 2016

CSS Locators


Note| 
 
Text in Blue [#PYTHON], Rose [#PROTRACTOR], Red [#RUBY] and Orange [#JAVA] can be edited or mentioned important for the entire blog. All the posts are practically done by me.


Experimental CSS Locators in automation aspects

CSS locators are comparatively faster than Xpath and readable; it uses JQuery's way to locate elements.

Note: This post is fully experimented on https://www.python.org/


General
     ID
               #id-search-field

     The same can be achieved through,
               *#id-search-field
               input#id-search-field

     Class
               .search-field
               .search-field.placeholder
               
     The same can be achieved through,
               *.search-field
               input.search-field

     Direct Child | absolute css
     '>' operator matches the immediate child of an element
               .python.home > #touchnav-wrapper > #nojs > p > strong:contains(Notice:)

     Sub Child | relative css
     a space between two instance matches any descendant of a parent/grand-parent elements
               .python.home strong:contains(Notice:)

     contains | text
     locates elements with text
               button:contains(GO)

     not contains | text
     skips elements with specific text
               a:not(:contains(notinthispage))









Attrribute
     CSS locates elements using properties
               input[name='q']
               input[id='id-search-field']
               input[class='search-field placeholder']
               input[class='search-field placeholder'][id='id-search-field']

     not contains | attribute
     locates all the elements that doesn't contain specific property, text, etc., 
               .tier-2:contains(Group):not(.element-4)
               .tier-2:contains(Group):not([class*='element-4'])



Advanced attrribute css selectors
     CSS locates dynamic elements using the following operators
               = operator
               ~= operator
               ^= operator
               $= operator
               *= operator
               |= operator

     Equal
     = operator lets you find elements that matches attribute with the exact specified value
               *[class='python home']

     space-separated values
     ~= operator lets you find elements that matches attribute with space-separated values
               *[class~='menu']

     prefix [begins-with]
     ^= operator lets you find elements that matches attribute starting with the specified value
               *[class^='main']

     suffix [ends-with]
     $= operator lets you find elements that matches attribute ending with the specified value
               *[class$='home']

     contains [contains]
     *= operator lets you find elements that matches attribute with a specified value, which is a part of actual attribute value
               *[class*='shell']

     hyphen separated values
     |= operator lets you find elements that matches attribute with hyphen-separated values starting from the left
               *[class|='site']



Css Siblings
     CSS locates sibilings similar to xpath
               Next sibling
               General sibling
               
     Next or Adjacent sibling
     selects the element/sibling next to the current element
               #top + header


     

     General sibling
     selects any number of siblings with matching type coming next to next from the current element
               #top ~ div
 



Pseudo class
     Pseudo-classes are actually not css inborn instead they are an absolute CSS foreigners implemented through JQuery, mootools, etc., listed below are some of the most commonly used pseudo classes for automation,
               :nth()
               :nth-child()
               :first-child
               :last-child
               :first-of-type
               :last-of-type
               :nth-of-type()
               :only-of-type
               hover
               E:focus
               link
               visited

     nth()
     collects the entire child, sub-child of a parent and matches the list in a sequential order or index with value starting from 0 as count 1
               .main-header .container div:nth(2)
               .meta-navigation.container *:nth(0)

     nth-child()
     unlike nth(), nth-child filters only the child with type and location 
               [role='menubar'] *:nth-child(1)

     here, it selects all the first child elements of the type <li>
               [role='menubar'] li:nth-child(1)









     first-child
     first-child is similar to nth-child(1)
               [role='menubar'] li:first-child


     last-child
     last-child is similar to first-child but locates the child's last elements
               [role='menubar'] li:last-child

     
first-of-type
     locates the parent's first elements w.r.t type
               [role='menubar'] li:first-of-type

     
last-of-type
     locates the parent's last elements w.r.t type
               [role='menubar'] li:last-of-type

     only-of-type
     matches all the given type (say, h1 tag) under a specific element
               .main-header .container h1:only-of-type

     hover
     locates element on hover over
               *[href='/psf/membership/']:hover

     
E:focus

     locates element on focus
               *[href='/psf/membership/']:focus

     
link

     locates element if hyperlinked
               *[href='/psf/membership/']:link

     visited
     locates already visited hyperlink
               *[href='/psf/membership/']:visited



Thursday 21 April 2016

Getting started with Protractor


Note| 
 
Text in Blue [#PYTHON], Rose [#PROTRACTOR], Red [#RUBY] and Orange [#JAVA] can be edited or mentioned important for the entire blog. All the posts are practically done by me.


Getting started with Protractor

1| Create a folder for new project.
2| Open Terminal/cmd_prompt and navigate project location.
3| Download protractor through terminal (make sure you have installed nodejs in your machine before executing the following command)

project-wise installation
npm install protractor

or
global installation
npm install -g protractor

4| And update the selenium-standalone-server.jar file after protractor installation.

project-wise updation
node_modules/protractor/bin/webdriver-manager update

or
global updation
webdriver-manager update

This will update the existing selenium server and ChromeDriver under node_modules/protractor/selenium/selenium-server-standalone-2.xx.x.jar



To update the selenium server alone, enter the following command,
webdriver-manager update --standalone

5| Now, create a spec file using Jasmine unit testing framework #sample

6| And create the Protractor configuration file, protractor-conf.js for execution #sample

7| To run the spec file, you need to start selenium-server first,

project-wise
node_modules/protractor/bin/webdriver-manager start

or
global
webdriver-manager start

8| Let's run the first protractor project now,

project-wise

node_modules/protractor/bin/protractor protractor-conf.js

or
global
protractor protractor-conf.js


Note: For more info. download my sample project from Github Link