How do we achieve automation?

Up to this point, all the previous entries of this blog have been centered on sharing all my notes, tricks and lessons learning since I started working on test automation. Currently I am working with a team with focus on web development and my goal is to implement Test Automation for our team. Now I want to take a few minutes to explain a little bit on the background (and motivation) for Test Automation.

In the beginning of time(?) testing was performed manually, but early on great minds though of using machines to do that, Terminator Style. Traditionally, App testing is performed by using a driver. A driver is the central part, the agent that performs the interaction with your app through the browser. Examples of drivers are: Selenium and Puppeteer.

Either you choose one or the other, they are highly popular and they both provide the capabilities needed for you to start web testing. You can check an amazing comparison in this concise yet informative article.

In this journey, we have chosen to implement our testing framework with Webdriver.io + Cucumber + Chai. To sum up, Webdriver.io is a framework that is built using Selenium Webdriver, Cucumber is a software tool used by computer programmers for testing other software. It runs automated acceptance tests written in a behavior-driven development style.

This driver interacts with the web elements in different ways. Let’s say, I want to log in to github. First I open the browser, then I type the URL and press enter. After that, I type my login and password in the login form. That’s it! Simple and intuitive, but unlike humans, the driver neither does not have eyes to locate the element to interact nor fingers to type the credentials of the github account.

But how does the Automation Driver locates and interacts with those elements? Simple, by using selectors. A selector is an unique attribute of a web element that allows the driver to select and interact with it . In plain old English, the driver navigates the DOM of the page and then it searches for the given selector, if it can find it, the element will be available for interaction: click a button, type text on a text input, click a checkbox, etc.

For example, with Webdriverio, the following are available:

CSS:
browser.click(‘h2.subheading a’)
Link text
browser.getText(‘=WebdriverIO’)
Attribute
browser.getAttribute(‘=WebdriverIO’, ‘href’);
Partial link text:
browser.getText(‘*=driver)
browser.getText('h1[alt*="welcome"]')

However, the necessity of implementing full test automation has encountered a small inconvenient, Polymer Apps use what is known as Shadow DOM, but we’ll see about that in the near future.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s