section_17_notes.txt

Verify elements

1.  'isExisting()' - returns true if at least one element is existing by a given selector.
Go to 'webdriveruniveristy.com' and find the 'hidden elements' portal.  On the hidden elements portal you 
will see 3 div containers.  Right click and inspect the page to identify the 3 div containers in the 
styles-sheet of the page.   Identify '#not-display' and change its display:true.  The click me button will 
appear on the page.  Do the same for the #visibility-hidden and change the visibility:true.  Another click me 
button.  Do the same for #zero-opacity and change opacity:100.  The last click me will appear.

After getting familiar with the id's of the page, copy the names in our code being sure to add a # in 
front to know they are id's.  Copy the id's in each 'it' function in our isExisting.js file located in our 
tests directory.  Also add the page header, 'h1', no need for # as it is not an id.  We will also test for 
#no-such-element as a control group for our test.

2.  'isEnabled()' - Return true or false if the selected DOM-element is enabled.
Go to 'webdriveruniveristy.com'and navigate to the 'dropdowns, checkboxes & radio buttons'.  On that page, 
there are a series of radio button, some disbaled, we will test those radio buttons.  Use the inspect tool to find the individual elements uysing 
Ranorex.  We will isolate the orangle dropdown and get the css properties using Ranorex('Selected & disbaled').
** Hint:  Right clicking on the element form the page, copying the css through Ranorex plugin and using the 
inspect page with the Ranorex tag  will help you identify css elements on the page **

3.  'isSelected()' - Will return true or false whether or not an <option> or <input> element of type 
checkbox or radio is currently selected.
Go to 'webdriveruniveristy.com', repeat thesame excercise as previous but use the 'isSelected()' method.

4.  'isVisibileWithinViewport()' - Return true if the selected DOM-element found by given selector is visible 
and within the viewport.  
Go to 'webdriveruniveristy.com', navigate to the 'Hidden Elements' page.  Here we will test the elements on the 
page using different screen resolutions and is the elements are visible with different resolutions.  Grab the 
elements we used on a previous excercise of 'isVisible()' method.
#not-displayed
#visibility-hidden
#zero-opacity
h1

The code structure should be similar to the two previous excercises.

If we need to output the size of the window when running test, we can use 'windowHandleSize()'.
'windowHandleSize()' - Protocol binding to get or change the size of the browser.
We can also use 'getViewportSize()'.
'getViewportSize()' - Get viewport size of the current browser window.

5.  We are gonna modify code from a earlier test, 'contactUsTest.js' by testing positive and negative scenarios.
To help us we will be using 'getText()' method.
'getText()' - Get the text content from a DOM-element. Make sure the element you want to request the text from 
is interactable otherwise you will get an empty string as return value. If the element is disabled or not 
visible and you still want to receive the text content use getHTML as a workaround.

Go to 'Contact Us' page on 'webdriveruniveristy.com' and create a successful and unscessful submission.  Copy 
the element tags of both outputs from the responses using the inspect tool and Ranorex.


6. 'waitForText()' - Wait for an element (selected by css selector) for the provided amount of milliseconds to 
have text/content. If multiple elements get queryied by given selector, it returns true (or false if reverse 
flag is set) if at least one element has text/content.

Navigate to 'webdriveruniveristy.com' and click on the the 'Accordian Items and Text Appear' link.  You'll see 
a page with the 'loading page' at the footer of the page.  It will change to 'loading complete'.  Lets us the 
new method to test this async method.

'(selector).getText()' - Get the text content from a DOM-element. Make sure the element you want to request the 
text from is interactable otherwise you will get an empty string as return value. If the element is disabled or 
not visible and you still want to receive the text content use getHTML as a workaround.

'$' - The $ command is a short way to call the findElement command in order to fetch a single element on the 
page. It returns an object that with an extended prototype to call action commands without passing in a 
selector. However if you still pass in a selector it will look for that element first and call the action on 
that element.

Using the wdio testrunner this command is a global variable else it will be located on the browser object 
instead.

You can chain $ or $$ together in order to walk down the DOM tree. For more information on how to select 
specific elements, see Selectors.

exp: $(selector)

7. 'waitForVisible()' - Wait for an element (selected by css selector) for the provided amount of milliseconds 
to be (in)visible. If multiple elements get queryied by given selector, it returns true (or false if reverse 
flag is set) if at least one element is visible.

This function checks for visibility using window.getComputedStyle. An element will be considered invisible if 
its visibility is ‘hidden’, its display is ‘none’, its opacity is 0 or its x/y coordinates are not within the 
viewport.

Navigate to 'webdriveruniveristy.com' and click on the 'ajax loader' link to test this function.  Use Ranorex 
to locate the p element in the page as it conatin the phrase "CLICK ME".  We can now test the waitForExist and 
waitForVisible on the Ajax loader and make sure that nothing is visible before a certain amount of time.

8.  'waitUntil()' - This wait command is your universal weapon if you want to wait on something. It expects a 
condition and waits until that condition is fulfilled with a truthy value. If you use the WDIO testrunner the 
commands within the condition are getting executed synchronously like in your test.

Go back to the 'Ajax Loader' page on 'webdriveruniveristy.com' We are going to know text when the 'loading 
complete' is displayed on the page.

9.  'waitForValue(selector[,ms][,reverse]).then(callback)' - Wait for an element (selected by css selector) 
for the provided amount of milliseconds to have a value. If multiple elements get queryied by given selector, 
it returns true (or false if reverse flag is set) if at least one element has a value.

Go to the previous excercise web location and Verify text exists within the loading div container.

End of 17