Taiko person

Let’s take a look at What Taiko is: “Taiko is a free open source browser automation tool developed by ThoughtWorks. It’s a Node library that Taiko uses the Chrome Devtools API and was built for testing modern Web applications.”

So for Taiko, 1) it’s built to test Web applications and 2) it’s based on Chrome

For those of you who are not familiar with the ThoughtWorks mentioned in Taiko’s introduction, jump here (the development team may also be a decision item in your framework selection evaluation).

Environmental installation

Before installing Taiko, make sure you have the NodeJs environment installed. If you have not installed NodeJS, go to the Node official website to install nodeJS.

For development tools, it is highly recommended that you use VS Code (one of the super development tools, not explained). If you have not installed VS Code, go to the VS Code official website to download and install it.

After ensuring that the first two basic support environments are installed, we need to install Taiko.

Create a new folder on your desktop, such as “Taiko Demo”. To open VS Code, click “Files” in the upper left corner, select “Open Folder”, and select the file you just created.

Open terminal in VS Code. Terminals are VS Code’s integration with command consoles, such as CMD,Powershell, and so on, allowing you to complete a range of operations without leaving the IDE. Select terminal above VS Code and select New Terminal, of course you can also use the shortcut key (CTRL + Shift + ‘).

After the new creation is complete, you will see a window like this. (This operation will be frequently used in subsequent operations, so familiarize yourself with it.)

Next, enter the command at the terminal:

npm install -g taiko

Install the Taiko Node package into the global environment. It might take a bit longer to install because Taiko has a Chromium browser built in with 100MB+.

Try to Taiko

To access Taiko’s command console, type Taiko at the terminal.

If you get an error message on the VS Code terminal :” Because scripts are not allowed to run on this system. For more information, please refer to the about_Execution_Policies https:/go.microsoft.com/fwlink/?LinkID=135170.” Use this method to handle Powershell Script Failure.

After entering Taiko, you will get this display:

Version: 1.0.4 (Chromium:81.0.3994.0) type.api for help and.exit to quit >

Next type openBrowser() and you’ll see Taiko open a browser. Then run goto(“baidu.com”) to switch to the baidu home page. Then run write again and the browser will fill the input box with the correct content. Finally, execute click(” Baidu search “) to simulate the operation of clicking on a search.

Next, type.code, and you’ll see the code for the steps you just did. This is automatically generated by Taiko for you.

Create a new file “first-case.js” in VS Code. Then copy the code that Taiko just generated for us into a file.

This completes our first Case: “Open your browser, type in, and click Search.”

Taiko execution process

Now you may be asking, how does Taiko execute? If I want to extend a use case, how do I extend it?

Let’s take a look at the first few commands we typed: openBrowser, goto, write, click. These are the built-in commands that Taiko provides for us.

Taiko basically gives us these basic browser-based commands, and we can use them to arrange and combine them. “Click,” “press,” “enter,” “select elements,” and so on, all of which are labeled on taiko’s official website. We just need to select the required command to operate.

For example, let’s change the operation:

await openBrowser(); await goto(“baidu.com”); Await write(” await blog “); Await link(‘ await ‘).exists(); Await click(link(‘ sentence – blog park ‘));

This will be baidu search sentence you blog garden, and then click to jump to the sentence you blog garden.

Each of these steps will have an authentication, such as await link(‘ ubo.com ‘).exists(); If the page does not get an element named “Sentence you-blogosphere”, the validation will fail.

Convert all these steps into JS code, place it in our first-demo.js file, and run it in terminal:

taiko first-demo.js

You should see something like this:

[PASS] Browser opened [PASS] Navigated to URL baidu.com [PASS] Wrote taiko test automation into the focused element. [PASS] Clicked element matching text “打 开” 1 times [PASS] Browser closed

Successes and failures can be visually displayed. These use case steps are placed in the appropriate file and run at last to get the test results.

Write use cases in conjunction with Gauge

Now that you’ve seen how Taiko works, it provides commands to manipulate the browser, which you can permutations and combinations to perform simulations and get automated test results.

So do you think it’s easy enough? Is it convenient to maintain and edit use cases with your team? Obviously not working very well.

So now we’ll introduce another tool: Gauge. It will be based on the command operations provided by Taiko, and the corresponding operations will be performed in a more natural manner.

Enter the following command in vs Code’s terminal:

npm install -g @getgauge/cli

This completes the Gauge installation. There is, of course, an installation package available on the Gauge website. How you install it is up to you, but I strongly recommend using the NPM installation here.

Gauge also comes with VS Code’s extension support, which you can install in vs Code’s extension (far left button).

Next, create a new folder on your desktop, gauge-demo, and open it in vscode.

Enter:

gauge init js

When the run is complete, you will have the Gauge initialization item. The VS Code extension also provides commands to create, though there are often delays due to compatibility issues, so I recommend using commands to initialize the project.

The project after initialization is shown.

The use of the Gauge

Gauge before we use it, let’s get a sense of how Gauge works: Taiko provides easy instructions for using browsers, written in JS. However, this creates an obstacle for our test team. First of all, all members have to be familiar with the WRITING of JS, such as await and other keywords, which invisibly raises the threshold of technical operation. Also, all of our cases will have a lot of JS snippets to maintain, which undoubtedly increases the maintenance cost.

So what does Gauge do? It is built on Top of Taiko and allows testers to match a certain keyword to a section of JS, for example (” jump “corresponds to Taiko’s Goto). What’s the good of that? The team doesn’t need to master JS anymore. Frequent operational use cases can be consolidated into common instructions, increasing maintainability.

So now take a look at the initialization items provided by Gauge and you’ll quickly understand:

Look at the step_implementation.js file under the test folder. See part of the code here:

step("Goto getgauge github page".async() = > {await goto('https://github.com/getgauge');
});
Copy the code

So ‘Goto getgauge github page’ corresponds to taiko’s operation await Goto (‘github.com/getgauge’); .

Then take a look at example.spec under the Specs folder. Corresponding parts are:

* Goto getgauge github page

This way, the use-case writer only needs to write such a statement to complete the operation. And a small part of the test team, responsible for the preparation of JS correspondence, functional testing personnel responsible for the preparation of use cases, can quickly complete the test work.

Let’s try it out by adding a statement to the step_implementation.js file under the test folder:

step("Jump to youju blog".async() = > {await goto("baidu.com");
    await write("Sentence You Blog Garden");
    await link('You - The Garden of Visitors').exists();
    await click(link('You - The Garden of Visitors'));
});
Copy the code

Is this part of the code familiar? This is the code we wrote when we first started using Taiko. Now that we’ve wrapped it up, we’ve got the command to jump to your blog. Then go to example.spec under the Specs folder and add the action:

## Jump test * Jump to sentence you blog

The text command Gauge uses the MarkDown notation. We don’t need to go over to markdown now, just know that in the spec file: # represents the name of the test project, for example, you can name it (# attendance analysis test), and ## represents the test case, for example, you can name it (## Add attendance person). * represents the step, whose name is derived from the corresponding keyword in the JS file.

Finally execute in terminal:

Gauge Run [Filename of your spec]

You can test and eventually generate a test report.

If you have VS Code’s Gauge plug-in installed, when you enter the ‘.spec’ file, you will see a run button on each use case. Click to execute the use case.

conclusion

This article uses a small example to show you what Taiko and Gauge are and how to use them. So what are the advantages over traditional automated testing? And what are the advantages and disadvantages of automated testing frameworks compared to other frameworks today? (for example, compared to the Robot Framework). How does Taiko practice BDD (Behavior-driven development) at its core? How to write more complex use cases and how to set up a good partition for maintaining team members will be covered in later articles.