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
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:
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")
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.
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:
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"))
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 to my fellow teammates at everis for all the knowledge we shared during those months working together
Samuca, Ronaldo, Andrei, Felipe and Duda.