Rules for id attribute:
- must be unique in a HTML document
- least one character
- no spaces
- case sensitive
Ways to locate HTML elements on a web page:
Order of preference:
- id
- name (if unique)
- class
- CSS selector
- XPath without text or indexing
- Link text or partial link text
- XPath with text or indexing
How to locate HTML elements by name attribute:
- ctr + F and type in the name of the element
- Selenium WebDriver method, ex:
browser=webdriver.Firefox()
browser.get(“https://stackoverflow.com”)
element = browser.find_element(By.NAME,”q”)
How to locate HTML elements by id attribute:
- ctr + F and type in the id
-Selenium WebDriver method, ex:
browser=webdriver.Firefox()
browser.get(“https://stackoverflow.com”)
element = browser.find_element(By.ID, “hiking”)
How to locate HTML elements by class attribute:
- ctr + F and type in the class, preceded by “.”, ex: .vector-menu-heading
-Selenium WebDriver method, ex:
browser=webdriver.Firefox()
browser.get(“https://stackoverflow.com”)
element = browser.find_element(By.CLASS, “vector-menu-heading”)
The name attribute:
- does not have to be unique
- is mostly used in forms to reference the element when data is submitted, e.g. login forms
XPath
- stands for XML path language
- uses path expressions to identify and navigate nodes in an XML document
- can be used to select one or more nodes in the document using relative or absolute paths
- used in worst case scenarios, like when a specific class, name, or id is unavailable
Absolute XPath
- the complete path from the root to the desired element, ex: /html/body/form[1]
- not as desirable to use as relative XPath
Relative XPath
- just references the desired element, ex: //form[1]
- preferred over absolute XPath
How to locate HTML element by XPath:
-Selenium WebDriver method, ex:
browser=webdriver.Firefox()
browser.get(“https://stackoverflow.com”)
element = browser.find_element(By.XPATH, “//form[1]”)
XPath Syntax: //
selects nodes in the document from the current node that match the selection no matter where they are
XPath Syntax: /
Selects from the root node
XPath Syntax: .
Selects the current node
XPath Syntax: ..
Selects the parent of the current node
XPath Syntax: @
Selects attributes
XPath Syntax: nodename
Selects all nodes with the name “nodename”
Class names
not unique
What are waits?
- Elements in a webpage may be loaded at different time intervals due to Ajax calls
- Waiting adds a time interval between actions performed by WebDriver
Explicit Waits
- Stops execution until a certain condition is satisfied
- It’s good practice to use explicit waits before locating and interacting with elements
Implicit Waits
- Polls the DOM for a given amount of time while trying to locate an element
- Differs from explicit waits by waiting before every call made by your script. Explicit waits wait for a specific condition to be fulfilled only.
CSS Selectors: *
Universal selector: selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces
CSS Selectors: elementname
Type selector: selects all elements that have the given node name.
Example: input will match any element with the name elementname
CSS Selectors: .
Class selector: selects all elements that have the given class attribute. Example: .index will match any element that has a class of "index".
CSS Selectors: #
id selector: selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Example: #toc will match the element that has the ID “toc”.
