DEV Community: milagros

Selector Strategies for Automated Browser Testing

milagros — Sun, 27 Dec 2020 16:57:02 +0000

In test automation, we have differents forms of selecting a WebElement in Selenium. A selector is a pattern used to locate a WebElement on a given webpage so we can interact with it. Examples of elements are buttons, text fields and input fields. Examples of actions are clicking on a given element or completing a password text field.

One of the challenges of automated testing, specially with end to end testing, is to mitigate the effect of changes in an ever changing application. E2E tests interact with the application through the UI.

Selectors strategies were born when people started thinking not only on delivering high quality code, but also delivering faster automation solutions.

The following image is a simplified version of the 'Agile Test Automation Pyramid', first proposed by Mike Cohn in his book 'Succeeding With Agile':

It is useful to know which selectors are faster under certain situations so we can make smarter decisions. They can impact on reliability, usability, performance and maintainability. That’s why it’s so important that we choose our selectors wisely.

You could check here the differents ways of locating an element

Some common strategies are:

ID
Name
Class
CSS Selectors
Xpath

ID/name/class

When using these, you can target specific elements instead of relying on page structure. If I am to choose one, I would prefer using the ID, as it is one of the safest and efficient ways to locate an element on a web page. But most elements don't have the ID attribute. This would require a combined work between developers and QA team members: work with developers and decide on the locators’ strategy together.

When ID is not present, the next best option is the name. You should check whether the name is unique or not.

PROS:

Very simple to use.
They don't rely on the structure of the page and will work even if it changes.

CSS Selectors

If the above-mentioned options are not available, the next best solution is CSS selector: is a string pattern used to identify elements based on combination of HTML tags, Ids, classes and attributes. CSS selectors have the same implementation across all browsers.

PROS:

Much faster than XPath
Widely used
Provides a good balance between structure and attributes
Allows for selection of elements by their surrounding context

CONS:

They tend to be more complex and require a steeper learning curve

Xpath

Allows to navigate through the HTML structure of a page. XPath allows the navigation through the XML structure of any document; it can be used both on HTML and XML. Provides an option to dynamically search for an element within a Web Page, giving the user flexibility.

There are two types of Xpath:

Absolute Xpath: It uses a Complete path from the Root Element to the desired element.
Relative Xpath: This can simply be started by referencing the element that you want and go from there.

CONS:

Is not recommended for cross-browser testing because it relies on browser’s XPath implementation which is not always complete

Helpful questions to ask yourself:

Are you running cross-browser testing?
Does your application have dynamic elements?
How does the element that you want to select looks like?
Does the locator strategy only match the desired element or elements?
Is the locator depending on information that is likely to change?

Frontend Basics

milagros — Wed, 18 Nov 2020 01:47:28 +0000

Basics matter.

HTML, CSS and JavaScript are the most fundamental building squares of web coding. For someone who has never coded before and doesn`t have a
technological backgroud, creating a page from scratch can seem really intimidating. It is important that you understand these basics in order to grow on the Frontend path.

HTML

It provides the basic structure of sites and it was first created by Tim Berners-Lee in 1989. It stands for Hyper Text Markup Language. If you think about it, an HTML file is just a text file. It is when you put that file into a browser when the magic happens.

It can be assisted by CSS and scripting languages such as JavaScript. HTML and CSS are actually not technically programming languages; they're just page structure and style information.

CSS

CSS is the language we use to style an HTML document: you can control the appearance of the documents defined with HTML. CSS is the best way to separate content and presentation. It describes how HTML elements should be displayed. Combined with Javascript, its current applications can be huge.

JavaScript

JavaScript enables interactive web pages and is an essential part of web applications: "it is the programming language of the Web".
To give you an idea, Javascript is behind anything that moves, refreshes, or changes on your screen without the need for you to manually reload the page.

Never forget:

HTML is the structure of your page: headers, text and images.
CSS is the presentation of the structure: customized fonts, background colors, etc.
Once you have created your structure and your aesthetic, JavaScript makes your site or project dynamic.

Quality Assurance Roadmap

milagros — Tue, 13 Oct 2020 01:18:37 +0000

From: https://github.com/fityanos/Quality-Assurance-Road-Map