DEV Community

loading...
Cover image for Interacting with a Web Page without inspecting it using Taiko

Interacting with a Web Page without inspecting it using Taiko

Lucas Andrade
I'm a brazilian QA engineer.
Updated on ・3 min read

Recently i've worked on a User Interface (UI) testing project, where me and my team were using Node.js, Gauge and Taiko as tools for automation. Before i've been a part of this team, i knew some JavaScript test frameworks and libraries, but i had never heard of Taiko. This can be your case, so in this article i'll show you the basic concepts of Taiko and how it can be a great choice for your next automated UI tests project.


🔨Installing Taiko

Taiko is a node module developed by ThoughtWorks. It allows us to interact with Chrome and Chromium browsers using proximity selectors to easilly find web elements on a page.

The simplest way to try out Taiko is using its Read-eval-print-loop (REPL). For that you will need to have Node.js installed on your machine. Open your favorite terminal emulator and run:

npm install -g taiko
Enter fullscreen mode Exit fullscreen mode

I'll not dive deeply into how to set up a full automation project in this post. So, if this is what you're looking for, i recomend you read about Gauge.

If the installation was a success, the REPL shall open when you type "taiko" in your terminal. Like shown below:

image


👉Using a proximity selector

To demonstrate how easy it is to interact with web elements on a page using Taiko's proximity selectors, i'll be using the Automation Practice e-commerce. You can navigate to the page by running the following commands (I'll explain each one later):

taiko
openBrowser()
goto("http://automationpractice.com")
Enter fullscreen mode Exit fullscreen mode

At the home page, we can see a situation where Taiko can show its potential. In this case, the page contains two products with exactly the same name.

Screenshot_1

Using the proximity selectors, it's not necessary to inspect the page looking for a unique identifier for the product you want to perform a click on. In other words, you ain't gonna need a CSS selector or an XPath here.

Let's supose you want to click at the second "Printed Dress" product, the one whose price is "$50.99". In this case you can tell Taiko to click at the "Printed Dress" that is localized above the "$50.99" text. Like shown in the image below:

image

Explaining in details what happened:

//Open Taiko's REPL;
taiko
// Open the automation controlled Browser, Chromium by default;
openBrowser() 
// Navigates to the URL passed as a parameter;
goto("https://automationpractice.com")
/*
Perform a click action. Receive two arguments:
    1st: The element you want to click. 
    Could be a "link" or an "image" for example. 
    If not informed, the default is "text";
    2nd: A proximity selector to help Taiko finding the 
    element. 
    We want the text element that is above another text element 
    "$59.99".
*/
click("Printed Dress", above("$50.99"))

Enter fullscreen mode Exit fullscreen mode

Cool right? Taiko currently have these other proximity selectors besides above: below, toLeftOf, toRightOf, near and within.

Of course there is no such thing as an "ultimate automation tool", maybe they won't help you in a more complex situation. But worry not, cause Taiko's API also have methods for locating elements using the old fashion like using the element html attribute "id". You can even combine the two of them! For more on that, refer to Taiko's Documentation.

Besides that team i've worked on, to this day i still haven't found another QA Engineers or Developers that use Taiko to automate tests at their jobs. Maybe you can be next after reading this post.

🍀 See ya!


🤝 Thanks

Thanks to my fellow teammates at everis for all the knowledge we shared during those months working together
Samuca, Ronaldo, Andrei, Felipe and Duda.

🔍 References

Taiko's Webpage
Taiko's Github Repository

😁 Let's chat!

Github
Linkedin

Discussion (0)