WebdriverIO — getting started

test automation… super quick and slick!

WebdriverIO — Getting Started

Well, once you are here, I guess you should be having at least a basic idea of what WebdriverIO is… a test automation framework.

On top of that I’d say… it is super awesome.

This is not going to be an in depth article about WebdriverIO but just a flavour on how you can get started really quickly with it.

In the mix we’ll see mocha for organising tests, chai for assertions, node.js for handling JavaScript libraries as well as Docker for spinning up our demo application — in this case a test WordPress instance.

Let’s get things prepared

So, make sure you have node.js and some tools that come with it installed. You can install it from here. I’d say, take the recommended LTS version. Run, in your terminal, node -v , npm -v , npx -v . If all these return version numbers, you’re fine to go.

In your terminal, create your own folder, like… wdio-test for instance, and navigate to it, then create a new node package there.

mkdir wdio-test
cd wdio-test
npm init -y

Note the package.json file created.

Now, let’s install Webdriver.IO and configure it with defaults.

npm i --save-dev @wdio/cli
npx wdio config -y

At this stage, besides WebdriverIO, we have already installed mocha and other essential packages. Let’s also install chai assertion library, from which we’ll be using the expect module in our test. WebdriverIO has also anexpect library but for the purposes of this tutorial I’ll be using chai .

npm i --save-dev chai

Have a look in package.json and you should see all packages installed in devDependencies section.

...
"devDependencies": {
    "@wdio/cli": "^6.1.15",
    "@wdio/local-runner": "^6.1.14",
    "@wdio/mocha-framework": "^6.1.14",
    "@wdio/spec-reporter": "^6.1.14",
    "@wdio/sync": "^6.1.14",
    "chai": "^4.2.0",
    "chromedriver": "^83.0.0",
    "wdio-chromedriver-service": "^6.0.3"
  }
...

Our tests files (the specs) will sit in test/specs folder… so let’s create it.

mkdir test
cd test
mkdir specs
cd ..

Get the tested application running

First of all, move back to your folder wdio-test .

You can try out and tests on any web application and beyond but I’ve prepared for you a WordPress instance on Docker, that you can spin up locally, so you have the total control of your test environment

Follow the steps here to get your WordPress with Docker test instance up and running on your computer.

What scenario we’ll test?

Well, we’ll test, using WebdriverIO, a very basic scenario… just Login to WordPress. In fact we’ll do the following:

• open the browser to and navigate to the URL to login in our test app
• check that the login page is displayed correctly
• feed in the login details
• perform login
• check that the login was performed successfully
• perform logout

Selectors

We’ll be identifying elements to interact with by their XPath, in this tutorial.

So navigate to http://localhost:8000/wp-admin (if you are logged in already in WordPress, perform a logout first).

Right click on the “Log In” button and select Inspect, as below:

Identify Elements

Now, let’s see the “Log In” button attributes:

As you can see, there is an attribute id="wp-submit" , this is how we are going to identify this element. The XPath in this case is:

//input[@id='wp-submit']

We are going to do the same for the “Username” and “Password” as well as on a couple of elements that are shown in the WordPress Dashboard after login.

Now, make sure you moved back to your wdio-test folder and then create a new file inside the specs folder. On Mac for instance, will go like touch ./test/specs/wdio-get-started.js . You can as well use a text editor, as well.

Put the following code in wdio-get-started.js with your favourite editor.

const expect = require("chai").expect;
describe("Test Scenario", () => {
  it("Navigate to WordPress", () => {
    browser.url("http://localhost:8000/wp-admin");
    $("//input[@id='wp-submit']").waitForDisplayed(5000);
  });
  it("Feed in details and initiate login", () => {
    $("//input[@id='user_login']").setValue("magicman");
    $("//input[@id='user_pass']").setValue("passwordWP");
    $("//input[@id='wp-submit']").click();
  });
  it("Perform assertions", () => {
    $("//h1[text()='Dashboard']");
    expect($("//p[@class='about-description']").getText()).to.equal(
      "We’ve assembled some links to get you started:"
    );
  });
  it("Logout", () => {
    $("//span[@class='display-name']").moveTo();
    $("//a[text()='Log Out']").waitForDisplayed(5000);
    $("//a[text()='Log Out']").click();
    $("//p[contains(text(), 'You are now logged out.')]");
  });
});

Go through it and note how we identify elements with$ which under the hood calling browser.findElement method. Also, note the use of waitForDisplayed methods that wait for elements to be displayed for the specified number of milliseconds. Also, note the mocha syntax, with describe block containing the scenario and it blocks containing individual test cases with theirs steps.

Now, you can run it with npx wdio wdio.conf.js and the run video will look something like below

WebdriverIO — run video

Once execution is complete you’ll see results as below:

I hope this tutorial was of use for you. Once again this was intended to be a very high level example of getting started with a basic WebdriverIO test scenario and for that reason we did not go into more detailed explanations but that will be covered in follow up tutorials.

See you!