Skip to main content

WebdriverIO

Next-gen browser and mobile automation test framework for Node.js.
Refer to official documentation for detailed usage. →

Writing Tests#

Testing your application will require interacting with UI elements. Best practice for selecting elements in your tests is with special attributes for testing.

  • Add test attributes to elements of your UI.
src/components/main/index.tsx
import React from "react";import { Button } from "@components";
export const Main: React.FC = () => {  return (    <div>      <h1 data-test="main-heading">superplate</h1>      <p>The frontend boilerplate with superpowers!</p>      <Button data-test="docs-btn-anchor">Docs</Button>    </div>  );};
  • Now these elements can be selected in tests with $ or $$.
const heading = await $('[data-test="main-heading"]');
  • Don't forget to visit the page before each test.
test/e2e/specs/home.spec.ts
describe("Homepage", () => {  beforeEach(async () => {    await browser.url("/");  });
  it("Brings header", async () => {    const heading = await $('[data-test="main-heading"]');    expect(await heading.getText()).toBe("superplate");  });
  it("Should have true href", async () => {    const button = await $('[data-test="docs-btn-anchor"]');    expect(await button.getTagName()).toBe("a");    const buttonHref = await button.getAttribute("href");    expect(buttonHref).toBeTruthy();    expect(buttonHref).toBe("https://pankod.github.io/superplate/");  });
  it("Should have icons", async () => {    const icons = await $$('[data-test="icon"]');    expect(icons).toHaveLength(6);  });});

Refer to official documentation on selecting elemets for detailed usage. →

Running Tests#

  • Configure baseUrl option in wdio.conf.js.
wdio.conf.js
exports.config = {  ...  baseUrl: "http://localhost:3000",  ...}
info

If your url parameter starts with /, the base url gets prepended, not including the path portion of your baseUrl. If your url parameter starts without a scheme or / (like some/path), the base url gets prepended directly.

Refer to official documentation on configuration for detailed usage. →

  • Add a command to run tests.
package.json
{    scripts: {        "webdriver:run": "wdio wdio.conf.js"    }}
  • Start your project in dev mode
npm run dev
  • Run tests with wdio
npm run webdriver:run

Refer to official documentation on command line for detailed usage. →

File structure#

WebdriverIO test directory is placed in the root of the project.

  • Add tsconfig.json for WebdriverIO
test/e2e/tsconfig.json
{  "compilerOptions": {    "types": ["node", "webdriverio", "@wdio/mocha-framework"]  },  "include": ["./specs/**/*.ts"]}
  • Don't forget to exclude WebdriveIO from main tsconfig.json
tsconfig.json
{  "exclude": ["test/*"]}
tip

All this work will be handled automatically by CLI, so you don’t need to do anything extra as long as you choose WebdriverIO plugin during the project creation phase.

Adding WebdriverIO to your project later#

If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.

npm install -D @wdio/cli
  • Generate configuration file
npx wdio config -y

Refer to official documentation on installation for detailed usage. →