Location>code7788 >text

Next Generation Browser and Mobile Automation Testing Framework: WebdriverIO

Popularity：150 ℃/2024-08-12 08:05:50

1. Introduction

Today we recommend a based on the writing and called the next generation of browser and mobile automation testing framework:WebdriverIO

in simple termsWebdriverIO: WebdriverIO is an open source automated testing framework that allows testers to write automated test scripts for testing web applications, mobile applications and desktop applications. Able to perform end-to-end (e2e), unit and component testing , mainly based on WebDriver, WebDriver BiDi and Chrome DevTools protocol to operate . Feature-rich, easy-to-use testing framework that supports multiple browsers and devices and is compatible with the Selenium WebDriver API.

Official Website:

/

2. Main functions and features

  • expand one's financial resources: WebdriverIO is an open source project that enables developers and testers to freely use and modify it in their own projects.

  • Cross-platform, multi-language support: Support for multiple programming languages (e.g. JavaScript, TypeScript, Python, etc.) and multiple operating systems (e.g. Windows, Linux, Mac OS, etc.) ensures cross-platform and cross-language compatibility.

  • Multi-browser support: WebdriverIO follows the W3C WebDriver standard to ensure seamless integration with mainstream browsers, and supports both WebDriver BiDi and Chrome DevTools protocols. With these two powerful toolsets, you can directly control the underlying functionality of the browser for finer debugging and testing.

  • Appium Integration: WebdriverIO not only supports web application testing, but also provides automation support for Android and iOS applications through the Appium platform.

  • Rich APIs and tools: WebdriverIO provides a powerful set of APIs and tools that enable developers to easily write and execute automated test scripts. These APIs and tools include methods for traversing lists of elements (e.g., $$, forEach, map, filter, and reduce, etc.) , allowing developers the flexibility to perform element manipulation.

  • Support for multiple testing frameworks and assertion libraries: WebdriverIO supports BDD/TDD testing frameworks such as Cucumber, Jasmine, and Mocha, as well as assertion libraries such as Chai, and so on. This support allows developers to choose the right test framework and assertion library for testing according to their own preferences and needs.

  • Ease of use and extensibility, encapsulates the Selenium WebDriver API.: Compared with Selenium , WebdriverIO provides a more concise API , making writing test scripts easier to understand , especially for developers familiar with jQuery . By encapsulating the Selenium WebDriver API, WebdriverIO is highly extensible, allowing users to extend its functionality as needed.

  • Supports multiple test modes: WebdriverIO not only supports automated testing of web applications, but also supports Native mobile applications and desktop applications developed by Electron.

3. Environmental installation

1. Installation

  • Download and Installation: Visit the official website/Download and install the latest stable version. The installation process is usually "fool proof", just click "Next" until it finishes, and make sure to configure the environment variables.
  • After the installation is complete, open the command line or terminal and type node -v to check if the installation was successful, if the version number is displayed, the installation was successful.

2. Initialize NPM space

  • In the folder where you want to store the WebdriverIO project (e.g., the WebdriverIO-test folder on the D drive), open a command line or terminal.
  • importationnpm init -ycommand to initialize a new NPM project space. This command creates afile, which is used to manage the project's dependent packages.

3. Install the WebdriverIO CLI.

  • At the command line or in a terminal, typenpm i --save-dev @wdio/clicommand to install WebdriverIO's command line interface (CLI).
  • After the installation is complete, thenode_modules/.bin/directory to find the wdio command. However, for ease of use, it is recommended that you add it to an environment variable or invoke it on the command line via the full path.

4、Generate configuration files

  • After installing the CLI, use thenpx wdio config command to generate a basic configuration file
  • After executing the command, a file is generated in the root directory of the project that contains configuration information for WebdriverIO

5. Install other dependencies (optional)

  • Depending on your testing needs, you may also need to install other NPM packages, such as npm wrappers for browser drivers (chromedriver, geckodriver, etc.).
  • These packages can be installed with the npm install command, for example:npm install chromedriver。

For browsers such as Chrome and Firefox, you will need to download the driver that matches your browser version (e.g. chromedriver, geckodriver).

4. Writing scripts

according toconfiguration items in the file, configure the project's test environment, browser, test framework, etc., and you can start writing test scripts.

Below is a simple sample WebdriverIO script for searching "WebdriverIO" in Baidu:

// Introducing WebdriverIO
const { remote } = require('webdriverio');

(async () => {
    // Set up the WebDriver configuration
    const options = {
        path: '/', capabilities: {
        capabilities: {
            browserName: 'chrome'
        }
    }.

    // Initialize the WebDriver instance
    const browser = await remote(options);
    try {
        // Open the Baidu homepage
        await ('');
        // Enter the search term in the search box
        await ('#kw', 'WebdriverIO'); // Click the search button.
        // Click the search button
        await ('#su'); // Wait for the search results page to finish loading.
        // Wait for the search results page to finish loading
        await (2000); // This is a simple pause, but you may need a more complex wait strategy in real projects.
        // Get the title of the search result (assuming it's the first search result)
        const title = await (); ('Search result title')
        ('The title of the search results page is:', title); // Get the title of the search results page.

        // Close the browser
        await (); // Close the browser.
    } catch (err) {
        ('Test error:', err); }
    }
})();

This example uses the remote method to initialize the WebDriver instance, which is the usage of WebdriverIO v5. If you are using WebdriverIO v6 or later, you may need to use a different API (e.g. new Browser()).

5. Summary

In summary.WebdriverIOis a powerful, flexible and easy-to-use automation testing framework for a variety of testing scenarios and requirements. Both novice and experienced test engineers can realize efficient automation testing with WebdriverIO, interested readers can try it.

Project Address:/webdriverio/webdriverio

<Previous Next>