DEV Community: Md. Sultan Parvez

Selector strategies

Md. Sultan Parvez — Sat, 09 Mar 2024 00:19:43 +0000

Selectors are crucial in Test Automation because they help identify and interact with elements within the user interface of an application or webpage.

There are mainly two types of selectors, Xpath and CSS selectors. Depending on the situation both of these techniques can be helpful. So in this thread, I will discuss the basics of both techniques.

Before starting with the strategies we need to understand some basics of a DOM( Document Object Model) tree. In the DOM tree, elements are represented as nodes, and each node can have different types. The main types of nodes in the DOM tree include element nodes, attribute nodes, and text nodes.

Tagname:

In the DOM tree, the tagname corresponds to the element node's name.
Element nodes represent the structure of an XML or HTML document, and they contain other nodes or elements.
For example, if you have

<book>Harry Potter</book>

, "book" is the tagname of the element node.

Attribute:

Attributes are associated with element nodes in the DOM tree.
They provide additional information about elements.In the DOM tree, attributes are represented as separate nodes attached to their respective element nodes.
For instance, in

<book id="1">Harry Potter</book>

, the attribute "id" with the value "1" is attached to the "book" element node.

Value:

The value is usually associated with an attribute in the DOM tree. For example, in

<book id="1">Harry Potter</book>

, “1" is the value of the attribute ‘id’ associated with the "book" element node.

Text :

Text nodes contain the actual text content within XML or HTML elements.
For example, in the XML

<book>Harry Potter</book>

, "Harry Potter" is the text node associated with the element node.
Text nodes can also represent whitespace characters such as spaces, tabs, and line breaks.

Xpath

Xpath stands for XML path language.
Most of the automation frameworks/tools utilize Xpath for finding
locator/selector in HTML dom structure.

There are two types of XPath. Absolute Xpath and Relative Xpath. Our focus will mainly be relative Xpath since absolute XPath are subject to changes hence not that useful for automation. An absolute XPath starts with '/' whereas a relative Xpath starts with '//'

The basic XPath format of relative Xpath is

//tagname[@Attribute='value']
//tagname[@Attribute]

Now in many cases for any given element the value of attributes is dynamic, that is the values are subject to change. To tackle this issue we can use functions.

'starts-with' function:

By utilizing this function we can target/select an element which have dynamic value but the starting text of the value is always the same.

Here is the syntax of the starts-with() function:

//tagname[starts-with(@attribute, 'value')]

'contains' Function:

The contains() function in XPath is utilized to select elements that contain a specified substring within their attribute values or text content.

Here is the syntax of the contains() function:

//tagname[contains(@attribute, 'value')]
//tagname[contains(text(), 'value')]

'text' Function:

The text function can be used to select an element that contains certain text.

Here is the syntax of the text() function:

//tagname[text() = 'actualValue')]

AND, OR operator in XPath

In some cases, we might need to target an element that has different locators that are based on other available actions of the page the locator changes in that case we can utilize the OR operator.

Here is the syntax of the OR operator:

//tagname[@Attribute1='value1' OR @Attribute2='value2']

Similarly, in some other cases, we might need to target an element that doesn't have a unique attribute-value pair but if we combine two attribute-value then we can target the element. In such case, we can use the AND operator.

Here is the syntax of the AND operator:

//tagname[@Attribute1='value1' AND @Attribute2='value2']

Xpath Axes Method:

We can utilize axes methods to traverse through the DOM tree. axes defines the relationship between elements.

Here is the syntax for axes:

//tagname[@Attribute='value']//axes::tagname[@Attribute='value']

Ancestor Axis (ancestor::): This axis selects all ancestors (parent, grandparent, etc.) of the current node.
Ancestor-or-Self Axis (ancestor-or-self::): This axis selects the current node and all of its ancestors.
Child Axis (child::): This axis selects all children of the current node.
Descendant Axis (descendant::): Selects all descendants (children, grandchildren, etc.) of the current node.
Descendant-or-Self Axis (descendant-or-self::): This axis selects the current node and all of its descendants.
Following Axis (following::): Select all nodes that appear after the current node in document order.
Following-Sibling Axis (following-sibling::): Selects all siblings that appear after the current node.
Namespace Axis (namespace::): This axis selects the namespace nodes of the current node.
Parent Axis (parent::): Selects the parent of the current node.
Preceding Axis (preceding::): Selects all nodes that appear before the current node in document order.
Preceding-Sibling Axis (preceding-sibling::): Selects all siblings that appear before the current node.
Self Axis (self::): This axis selects the current node.

Finally, we can also try different combinations of these function operators and axes as well.

CSS Selectors

CSS stands for cascading style sheet. CSS selectors are very efficient in locating elements. A lot of automation tools/framework supports CSS selectors. Cypress, Robot Framework, and Puppeteer to name a few.

The basic syntax for CSS selectors is

tagname[attribute='value']

Additionally, we can also select any element based on its ID or class.

Select By ID -

#ID

Select By Class -

.class

Sub-String Matching Technique

Similar to the starts-with and contains the functionality of Xpath we can also do pattern matching in CSS selector.

Prefix - '^':

Utilizing this symbol we can target an element that has a dynamic
value for a tagname but the value always starts with a specific sub-string.

Here is the syntax for the prefix -

tagname[attribute^='value']

Suffix - '$':

Similarly, if the value of the tagname ends with a specific pattern then we can match the end sub-string

Here is the syntax for the suffix -

tagname[attribute$='value']

Contains - '*':

Additionally, we can use the wildcard (*) symbol to just match the sub-string of the value at any given place.

Here is the syntax for the contains -

tagname[attribute*='value']

AND, OR operation

We can utilize the 'AND', and 'OR' operations in CSS selectors as well.

Here is the syntax for the AND operation -

tagname[Attribute1='value1'][Attribute2='value2']

This CSS selector targets elements of tagname that have both Attribute1 with the value value1 and Attribute2 with the value value2..

Here is the syntax for the OR operation -

tagname[attribute='value'],tagname[attribute='value']

',' denotes the OR operation.

Traversing In CSS Selector:

The syntax for traversing is as follows:

tagname[attribute='value'](traverse symbol here)tagname[attribute='value']

Descendant selector ( ): This selects all elements that are descendants of a specified element. For example, div p selects all <p> elements that are descendants of <div> elements.
Child selector (>): This selects all elements that are direct children of a specified element. For example, div > p selects all <p> elements that are immediate children of <div> elements.
Adjacent sibling selector (+): This selects an element that is immediately preceded by a specified element. For example, h2 + p selects the

element that directly follows an <h2> element.
General sibling selector (~): This selects all elements that are siblings of a specified element and are preceded by the specified element. For example, h2 ~ p selects all <p> elements that are siblings of an <h2> element and comes after it.

Unfortunately in the CSS selector technique traversing to the parent is not possible.

Pseudo-classes:

We can also utilize pseudo-classes to target our elements.

The format for pseudo-classes is as follows

tagname[attribute='value']:pseudo-class()

:hover: This pseudo-class is used to apply styles when the mouse pointer is over an element.
:active: Applied to an element while it is being activated by the user. For example, when a user clicks on a button, it becomes active.
:focus: Applied to an element when it receives focus, usually through keyboard navigation or clicking.
:visited: Applies to links that have been visited by the user. This pseudo-class is used to distinguish visited links from unvisited ones.
:nth-child() and :nth-of-type(): These pseudo-classes allow you to select elements based on their position within a parent element. For example, :nth-child(odd) selects every odd child element of its parent.
:first-child and :last-child: Selects the first or last child element of its parent.
:not(): This pseudo-class selects elements that do not match a specific selector. For example,:not(.class) selects all elements that do not have the specified class.
:checked: Applied to input elements (such as checkboxes or radio buttons) that are checked.
:enabled: This pseudo-class selects elements that are enabled, which are the opposite of disabled elements.
:disabled: This pseudo-class selects elements that are disabled, typically form elements like buttons, input fields, checkboxes, and radio buttons.

Pseudo-classes can be very powerful for assertion as you might have already guessed. We can also use the combinations of these techniques to target a unique element.

Thank you for taking the time to read this. I hope you found it informative and enjoyable. If you have any questions, comments, or feedback, please don't hesitate to reach out.

Getting started with Cypress

Md. Sultan Parvez — Fri, 09 Feb 2024 12:10:19 +0000

Cypress is a popular automation framework and unlike selenium cypress does not require a web driver. It is built on top of node.js and compatible with both JavaScript and TypeScript.

Prerequisites:

As mentioned earlier it is built on top of node.js so it requires node.js as a Javascript run time environment. Having the latest version is recommended.
Any IDE of our choice is fine as long as it supports javaScripts or typeScripts. Visual Studio Code is a popular one. I personally like WebStorm, you can also try out Atom and Intelij Idea.

Installation Process:
Cypress can be installed with the node package manager(npm). we can install Cypress with this simple command

npm cypress install

However, it is recommended to use the command below since we want to add this as a dev dependency.

npm install cypress --save-dev

Specifying Cypress as a dev dependency allows us to specify the exact version of Cypress we are using. This also ensures consistency across different development environments and makes it easier to reproduce issues or run tests on different machines.

Know Your Files:

Now that we are done with the installation we can start writing tests using cypress but first, let's get familiar with the files and folders.

Cypress/Fixtures: Fixtures are used to store commonly used test data in JSON format
Support/CustomCommand.js: This file helps in creating custom commands or global overrides that will be
package.json: It holds information about the project, dependencies, etc. This file also holds "scripts" metadata. These scripts can be called using "npm run ". These are various commands that can be run via terminals.
cypress.config.js: This holds various cypress-related configurations like URL, admin username, password, timeouts, etc where behavior cypress can be modified.
Screenshots: This folder stores the screenshots that were generated while the automation script was running.
Videos: This folder stores the video of the runtime so it is easier to trace defects.

These files and folders automatically generate when we install Cypress along with some other files.

Additionally, you would like to create some other folders and files as well.

Cypress/TestSuites: The TestSuites folder includes all the test files. The test files are written as ".js" or ".ts".
Cypress/Reusables: this folder contains methods that can be commonly used throughout our tests
Cypress/Support/API: The API folder contains some commonly used API-related methods, API methods related to specific modules, and a file containing methods for API calls in general
CustomCommand.js: This file helps in creating custom commands or global overrides that will be available for all other classes and functions
Cypress/PageObjects: The PageObjects folder contains classes that help separate page-specific functions.
Cypress/Wiring: The wiring folder contains locators and getter functions of the locators that are used in PageObjects helper functions.

Project Layout:

cypress/
├── fixtures/
│   └── data.json
├── support/
│   ├── commands/
│   │   ├─ API 
│   ├── pageObjects/
│   │   ├── Page1/
│   │   │   └── Page1Objects.js
│   │   ├── Page2/
│   │   │   └── Page2Objects.js
│   ├── wiring/
│   │   ├── Reusables/
│   │   │   └── Reusable.js
│   │   ├── Page1/
│   │   │   └── Page1Functions.js
│   │   ├── Page2/
│   │   │   └── Page2Functions.js
├── tests/
│   ├── verifyWorkflow.js
├── support/
│   ├── customCommands.js
└── screenshots/
└── videos/

Test Case:

Now inside the testSuites folder, we can create a new file with .js or .ts extension this file will be considered a test file. Inside a test file, we need to have at least a "describe" block and a "it" block. The "describe" block is used for grouping related test cases whereas the "it" block represents a single end-to-end test. There are also some hooks available in Cypress such as "before", "beforeEach", "after", and "afterEach" These hooks can be utilized for setting up and cleaning up the test data as well as for prerequisites for the test cases.

Cypress utilizes Mocha, a popular testing framework, for structuring tests. Mocha provides a flexible and intuitive syntax for organizing test suites and cases, enhancing test readability. Additionally, Cypress utilizes Chai, an assertion library, for writing clear and expressive assertions within tests. Chai offers a wide range of assertion styles, including should, expect, and assert, enabling developers to choose the syntax that best fits their testing preferences. Together, Mocha and Chai help in creating comprehensive and readable test suites, which helps a great deal in terms of facilitating effective testing and ensuring the robustness of web applications built with Cypress. This is what a typical test file would look like:

// login.spec.js

// Describe block to group related test cases
describe('Login Page', () => {
  // before block to run once before any test cases
  before(() => {
    // Perform any setup tasks before any test cases
    // This can include starting the application server or preparing test data
  });

  // beforeEach block to run before each test case
  beforeEach(() => {
    // Visit the login page
    cy.visit('/login');
  });

  // Test case to verify successful login
  it('should allow user to log in with valid credentials', () => {
    // Enter username and password
    cy.get('input[name="username"]').type('your_username');
    cy.get('input[name="password"]').type('your_password');

    // Click the login button
    cy.get('button[type="submit"]').click();

    // Assertion to verify successful login
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome').should('be.visible');
  });

  // Test case to verify error message with invalid credentials
  it('should display error message with invalid credentials', () => {
    // Enter invalid username and password
    cy.get('input[name="username"]').type('invalid_username');
    cy.get('input[name="password"]').type('invalid_password');

    // Click the login button
    cy.get('button[type="submit"]').click();

    // Assertion to verify error message
    cy.contains('Invalid username or password').should('be.visible');
  });
  // afterEach block to run after each test case
  afterEach(() => {
    // Clear any logged-in state or cookies
    // This ensures a clean state before each test case
    cy.clearCookies();
    cy.clearLocalStorage();
  });

  // after block to run after all test cases
  after(() => {
    // Perform any cleanup tasks after all test cases
    // This can be useful for resetting the application or cleaning up resources
  });
});

Thank you for taking the time to read this. I hope you found it informative and enjoyable. If you have any questions, comments, or feedback, please don't hesitate to reach out.