WebdriverIO: 30+ Interview Questions and Answers

WebDriverIO is a popular open-source automation testing framework that offers an easy to use interface for automating web applications. It is built on the WebDriver protocol, allowing it to interact with browsers and automate interactions with web pages.

What is WebdriverIO?

WebDriverIO provides a simple and easy to use interface for writing and executing tests, and it supports multiple programming languages, such as JavaScript, TypeScript, and Python. Users can quickly develop and execute test cases regarding the extensive set of built-in commands and assertions provided.

The ability of WebDriverIO to run tests simultaneously across various browsers and devices is one of its primary benefits. This feature can significantly speed up testing and ensure that applications are completely tested in various contexts.

Given its simplicity, adaptability, and active community, WebDriverIO has become a well-liked and effective automation testing framework among developers and testers.

Key Takeaway: WebdriverIO is an open-source browser automation framework with a simple interface for writing and running tests, and one of the main benefits of WebdriverIO is running tests simultaneously across browsers and devices.

Beginner Level WebdriverIO Interview Questions

We will cover the fundamental concepts of WebDriverIO, including its purpose, benefits, installation, configuration, and commands. By mastering these basic concepts, you can develop a solid understanding of WebDriverIO and showcase your knowledge to potential employers.

What is WebDriverIO, and what is its purpose?

WebDriverIO is an open-source browser automation testing framework that enables developers and testers to automate interactions with web applications. The framework offers a simple and user-friendly interface for generating and running tests, runs on Node.js with tests written in JavaScript or TypeScript, and has a large selection of built-in commands and assertions. It automates browsers through the WebDriver and WebDriver BiDi protocols, and mobile apps through Appium. Its goal is to automatically test web apps to ensure they function as planned and detect faults and errors before they are released.

How do you install WebDriverIO?

The recommended way is the WDIO starter toolkit. The command below runs a setup wizard that installs the packages, asks for the test framework, reporter, and services, and creates the wdio.conf file and an example test:

npm init wdio@latest .

What are some advantages of using WebDriverIO for browser automation testing?

Some benefits of using WebDriverIO for browser automation testing include cross browser testing, ease of use, flexibility, and an active community. Additionally, WebDriverIO offers a broad range of built-in commands and assertions, automatic waiting for elements, first-class TypeScript support, and services for cloud grids, visual testing, and reporting.

What is a Page Object in WebDriverIO?

A Page Object is a design pattern WebDriverIO uses to separate each web page element into its classes, making it simpler to manage and update the test code. Tests become more modular, reusable, and manageable by enclosing the components and functionality of a web page into a Page Object.

How do you launch a browser in WebDriverIO?

In a project that uses the WDIO testrunner you do not launch the browser yourself: the runner reads the capabilities from the wdio.conf file, starts the session, and provides the global browser object to every test. The init() method of old versions no longer exists. In standalone mode, for example in a script, the remote() function starts a session with the capabilities you pass:

const { remote } = require('webdriverio');

const options = {
    capabilities: {
        browserName: 'chrome'
    }
};

const browser = await remote(options);
      

Key Takeaway: Beginner WebdriverIO interview questions cover the purpose of WebdriverIO, installing WebdriverIO with the npm init wdio starter toolkit, advantages such as cross browser testing and an active community, and the Page Object design pattern.

List of WebdriverIO Interview Questions

Note: We have compiled all the WebdriverIO Interview Questions for you in a template format. Feel free to comment on it. Check it out now!!

Intermediate WebDriverIO Interview Questions

If you have used WebDriverIO before and are getting ready for an intermediate-level interview, you might be familiar with the fundamentals of the tool and its primary functions. In this set of intermediate-level interview questions and answers, we'll cover WebDriverIO-related subjects like implementing best practices for code organization and maintainability, working with multiple browsers and platforms, and using advanced commands and techniques for testing complex web applications. You can demonstrate your knowledge of WebDriverIO by learning these intermediate-level concepts and establishing yourself as an essential member of any testing team.

What are selectors in WebDriverIO, and what are some types of selectors?

WebDriverIO uses selectors to distinguish between elements on a web page. Tag names, classes, IDs, and CSS selectors are a few examples of selector types. The following code, for instance, can be used to choose an element with a particular ID:

const element = await browser.$('#my-element-id');
      

What is an implicit wait in WebDriverIO, and how is it useful?

An implicit wait in WebDriverIO is a synchronization that waits for a given period for an element to be present before throwing an exception. This is helpful when working with web apps with dynamic parts that load asynchronously. WebdriverIO already waits automatically for an element before it interacts with it, and the documentation recommends the explicit waitFor commands over implicit waits, because mixing both leads to unpredictable wait times. When an implicit wait is needed, it is set like this:

browser.setTimeout({
    implicit: 10000
});
      

What is a promise in WebDriverIO, and how is it used?

A promise is a JavaScript object that depicts whether an asynchronous operation will succeed or fail. The "getText()" method of WebDriverIO returns a promise that resolves to the visible text of an element, among many other ways that return promises. With "async/await" syntax, promises can be leveraged to create clearer and easier to read code.

Also Read: A list of 70 Cucumber Interview Questions and Answers

What is the difference between getText() and getValue() in WebDriverIO?

WebDriverIO's getText() and getValue() functions retrieve text values from web elements. However, they have various return types and can be used for different elements. The following table compares the two approaches:

How do you perform drag and drop actions in WebDriverIO?

Drag and drop is an element command: call dragAndDrop() on the element you want to move. The target can be a pair of coordinates, as in the following code, or another element:

const element = await $('#my-element');
await element.dragAndDrop({ x: 100, y: 100 });

What is the difference between waitForEnabled() and waitForDisplayed() in WebDriverIO?

The waitForEnabled() and waitForDisplayed() methods in WebDriverIO are used to wait for elements to become available on the page. They vary in terms of what they wait for and when they consider an element "ready." Here is a table comparing the two approaches:

How do you handle alerts and pop-ups in WebDriverIO?

The browser object offers the acceptAlert(), dismissAlert(), getAlertText(), and sendAlertText() commands for JavaScript dialogs. The alertAccept() and alertDismiss() names belong to WebdriverIO v4 and no longer exist. You can use the following code to accept an alert:

await browser.acceptAlert();
      

What are the benefits of using the Page Object Model (POM) in WebDriverIO?

The benefits of using the Page Object Model (POM) in WebDriverIO include:

• Better code organization and maintenance: By separating your page objects from your test code, you can generate more modular, reusable code that is simpler to update and maintain.
• Improved test readability and maintainability: You can make your tests easier to understand and less brittle by encapsulating page-specific elements and functionality in page objects. It will also lower the risk of errors and failures due to changes to the application or user interface.
• Better collaboration and communication: By adopting a common language and structure for your page objects, you can ensure that testers, developers, and stakeholders agree regarding the UI and functionality of the application.

Key Takeaway: Intermediate WebdriverIO interview questions cover selectors such as tag names, classes, IDs, and CSS selectors, promises for asynchronous operations, the dragAndDrop() method, and handling alerts with acceptAlert(), dismissAlert(), and getAlertText().

Advanced WebdriverIO Interview Questions

If you are an expert in WebDriverIO and are getting ready for an advanced interview, this segment gets you covered with advanced WebDriverIO-related topics such as advanced test methodologies, performance testing, integration with CI/CD pipelines, and advanced automation techniques. You can demonstrate your ability to use WebDriverIO to build and carry out complex testing solutions and establish your worth as an expert in test automation by showcasing your understanding of these advanced concepts.

What is a custom command in WebDriverIO, and how do you create one?

In WebDriverIO, a custom command is a user-defined command that extends the capabilities of the framework. The browser object's addCommand() method can be used to construct a custom command. Use the following code to build a custom command that clicks on an element and waits for it to disappear:

browser.addCommand('clickAndDisappear', async function (selector) {
    const element = await this.$(selector);
    await element.click();
    await element.waitForDisplayed({ reverse: true });
});
      

What is a hook in WebDriverIO, and mention types of hooks?

A hook in WebDriverIO is a function that executes before or after a test or a set of tests at a certain point in the test lifecycle. Hooks are used for preparing the testing environment, carrying out specific tasks, and clearing up when the tests have been executed. The test execution procedure can be customized using a variety of hooks that WebDriverIO permits. These include before-and-after hooks for test suites, before-and-after hooks for commands, and before-and-after hooks at the runner level. The test data setup, logging additional information, capturing images, and handling issues are just a few of the functions that hooks may carry out.

beforeEach(() => {
    console.log('Running test...');
});
      

How do you take screenshots in WebDriverIO?

You can utilize the saveScreenshot() function offered by the browser object in WebDriverIO to capture screenshots. The following code can be used to capture a screenshot of the current page:

await browser.saveScreenshot('screenshot.png');

What is a visual regression test, and how do you implement it in WebDriverIO?

A visual regression test evaluates a web page's visual output before and after a change to detect any unintentional changes. WebdriverCSS and wdio-visual-regression-service, which older guides mention, are abandoned. The current solution is the official visual service (the @wdio/visual-service package), which saves baseline images and adds matchers that compare a screen, a full page, or a single element against the baseline:

// wdio.conf.js
exports.config = {
    services: ['visual'],
    // ...
};

// test file
describe('My website', () => {
    it('should look the same', async () => {
        await browser.url('https://example.com');
        await expect(browser).toMatchScreenSnapshot('homepage');
        await expect($('#my-element')).toMatchElementSnapshot('my-element');
    });
});

How do you interact with iframes in WebDriverIO?

Elements inside an iframe are reachable only after the context is switched to that frame. WebdriverIO v9 uses browser.switchFrame(), which accepts an element, a URL, or a function, while v8 and earlier use browser.switchToFrame() with the frame element:

// WebdriverIO v9
await browser.switchFrame($('#my-iframe'));
await $('#button-inside-the-frame').click();
await browser.switchFrame(null);              // back to the top-level page

// WebdriverIO v8 and earlier
await browser.switchToFrame(await $('#my-iframe'));

What is the difference between browser.url() and browser.navigateTo() in WebDriverIO?

Both commands load a page in the current tab. The difference is the level of the API:

• browser.navigateTo(url) is the raw WebDriver protocol command. It needs an absolute URL and does nothing else.
• browser.url(path) is the WebdriverIO command that tests should use. It resolves a relative path against the baseUrl of the configuration, so the same test runs against every environment.
• In WebdriverIO v9, url() also accepts options: the wait state of the page load, basic authentication credentials, custom headers, and an onBeforeLoad function for mocking browser APIs before the page scripts run.

Neither command opens a new tab. A new tab or window is opened with browser.newWindow().

How do you interact with a select dropdown in WebDriverIO?

You can utilize the selectByVisibleText(), selectByAttribute(), and selectByIndex() commands of the select element to interact with a select dropdown in WebDriverIO. For instance, you can use the below code to choose an option based on its visible text:

const select = await browser.$('#my-select');
await select.selectByVisibleText('Option 1');

How do you interact with a file input element in WebDriverIO?

The chooseFile() command of WebdriverIO v4 no longer exists. A file is uploaded by setting the file path as the value of the file input. When the browser runs on a remote machine or a cloud grid, browser.uploadFile() first transfers the local file and returns its remote path:

const path = require('node:path');

const localPath = path.join(__dirname, 'data', 'report.pdf');
const remotePath = await browser.uploadFile(localPath);   // needed when the browser runs remotely
await $('#my-input').setValue(remotePath);
await $('#upload-button').click();

What is the difference between waitForExist() and waitForDisplayed() in WebDriverIO?

How do you scroll to an element in WebDriverIO?

Use the scrollIntoView() command of the element to scroll to it in WebDriverIO. For example, use the following code to scroll to an element with a particular ID:

const element = await $('#my-element');
await element.scrollIntoView();
await element.scrollIntoView({ block: 'center', inline: 'center' });   // same options as the DOM method

How do you read the text of an alert or dismiss it in WebDriverIO?

Besides accepting a dialog, a test often has to check its message, type into a prompt, or cancel it. The getAlertText(), sendAlertText(), and dismissAlert() commands cover these cases. In WebdriverIO v9, which uses WebDriver BiDi, a test can also register a listener with browser.on('dialog', ...) and handle the dialog there:

const text = await browser.getAlertText();
expect(text).toBe('Delete this record?');

await browser.dismissAlert();                  // the Cancel button

// for a prompt dialog: type a value, then confirm
await browser.sendAlertText('WebdriverIO');
await browser.acceptAlert();

How do you drag one element onto another element in WebDriverIO?

Call dragAndDrop() on the source element and pass the target element. An optional duration slows the movement down, which helps with pages that react to intermediate mouse events:

const source = await $('#my-source-element');
const target = await $('#my-target-element');
await source.dragAndDrop(target);
await source.dragAndDrop(target, { duration: 500 });

How do you wait for an element to be clickable in WebDriverIO?

Use the waitForClickable() command of the element to wait for an element to become clickable in WebDriverIO. For instance, you can use the following code to wait for a button with a specified ID to become clickable:

await browser.$('#my-button').waitForClickable();

How do you interact with cookies in WebDriverIO?

The setCookies(), getCookies(), and deleteCookies() methods offered by the browser object can be used to interact with cookies in WebDriverIO. Use the below code to set a cookie:

await browser.setCookies({
    name: 'my-cookie',
    value: 'my-value'
});

How do you simulate keyboard events in WebDriverIO?

You can use the keys() function given by the browser object to simulate keyboard events in WebDriverIO. For instance, use the following code to send the Tab key:

await browser.keys(['Tab']);

What changed in WebdriverIO v9?

• WebDriver BiDi by default: Sessions use the bidirectional protocol where the browser supports it, which enables listening to console logs, network requests, and dialogs.
• New url() options: Authentication, headers, wait states, and onBeforeLoad scripts.
• Frames and shadow DOM: browser.switchFrame() replaces switchToFrame(), and selectors pierce open and closed shadow roots automatically.
• Emulation and fake timers: browser.emulate() covers geolocation, color scheme, user agent, and the clock.
• Requirements: v9 needs Node.js 18.20 or later, and the old synchronous mode is gone, so every command is awaited.

How does WebdriverIO compare with Selenium, Playwright, and Cypress?

• Selenium WebDriver: A browser automation library for many languages. WebdriverIO builds on the same protocol and adds a test runner, automatic waits, services, and reporters for JavaScript and TypeScript teams.
• Playwright: Drives browsers through its own protocol and bundled browser builds, with strong tracing and parallel execution. It does not automate native mobile apps.
• Cypress: Runs inside the browser next to the application, which gives a strong debugging experience and limits multi-tab, multi-origin, and mobile scenarios.
• WebdriverIO: The main choice when one JavaScript framework has to cover web, native and hybrid mobile apps through Appium, and any browser and device on a cloud grid through the standard protocol.

How do you run WebdriverIO tests on a cloud grid?

The test code does not change. The wdio.conf file receives the user name and access key of the cloud account from environment variables, the host name of the grid, and capabilities that name the browser, the browser version, and the platform, together with vendor options such as the build name, video, and network logs. A service package of the vendor can open a tunnel for locally hosted applications and report the test status back to the dashboard. With maxInstances, the specs then run in parallel across as many browser and operating system combinations as the plan allows, for example on the TestMu AI cloud.

How do you run tests in parallel using WebDriverIO?

You can use the maxInstances configuration variable in your wdio.conf.js file to run tests concurrently using WebDriverIO. Utilize the following configuration to run tests parallel across five instances:

exports.config = {
    maxInstances: 5,
    // ...
};

How do you run tests on multiple browsers using WebDriverIO?

You can utilize WebDriverIO's capabilities configuration option in your wdio.conf.js file. For instance, use the setup below to run tests on Firefox and Chrome:

exports.config = {
    capabilities: [
        { browserName: 'chrome' },
        { browserName: 'firefox' }
    ],
    // ...
};

Key Takeaway: Advanced WebdriverIO interview questions cover custom commands created with the addCommand() method, visual regression tests that compare page output before and after a change, file uploads with browser.uploadFile(), the changes in WebdriverIO v9, and running tests on a cloud grid.

AI and Agentic WebdriverIO Interview Questions

WebdriverIO released several major versions with breaking changes, and AI coding assistants learned from all of them. An AI agent can also drive a browser by itself, which raises the question of where scripted tests still fit.

What do you check in WebdriverIO code that an AI assistant or agent generated?

• Removed commands: browser.init(), alertAccept(), chooseFile(), browser.element(), and other v4 names that no longer exist.
• Synchronous style: Commands without await, which was valid in the old sync mode and now returns unresolved promises, so assertions pass or fail at random.
• Commands on the wrong object: Element commands such as scrollIntoView() or dragAndDrop() called on the browser object.
• Fixed pauses: browser.pause() in place of the waitFor commands and the automatic waiting of expect-webdriverio matchers.
• Brittle selectors: Long XPath expressions where an accessibility name selector, a data attribute, or a text selector would survive a layout change.
• Dead packages: Services and plugins that are no longer published or maintained. Check every new dependency in the npm registry.

How do AI agents change end-to-end testing with WebdriverIO?

Agents take over the parts that cost the most time: they draft page objects and specs from a user flow, repair selectors after a user interface change, and classify failures as product bugs, test bugs, or environment problems. Agentic testing tools go one step further and execute a goal written in plain language without a script. Scripted WebdriverIO tests remain the deterministic regression layer, because they are fast, repeatable, and reviewable in a pull request, while an agent-driven run fits exploration and flows that change often. The engineer remains responsible for the assertions, the test data, and the decision about what a failure means.

Key Takeaway: Generated WebdriverIO code is reviewed for removed v4 commands, missing await, element commands called on the browser object, fixed pauses, and brittle selectors, and AI agents draft and repair tests while scripted specs stay the deterministic regression layer.

WebdriverIO Best Practices

It's crucial to follow best practices while working with WebDriverIO to make sure your testing procedure is quick, simple, and easy to maintain. Following best practices will help you to speed up the development process, enhance the quality of your testing, and conserve time and money. We will discuss various techniques and approaches for improving your test automation process in this list of WebDriverIO best practices.

The following are the best practices for writing effective WebDriverIO tests:

• To make your tests, test suites, and page objects more readable and maintainable, provide meaningful, descriptive, and specific names.
• To verify desired results and behavior, use assertions rather than a manual inspection or visual validation.
• Avoid using hardcoded values or overly complex expressions that could break quickly and instead use selectors and locators that are reliable, distinct, and stable.
• Instead of relying on fixed or arbitrary delays, use waits and timeouts to ensure that your tests are executed predictably and reliably.
• To write tests that are easy to understand and debug, use a consistent, organized test framework and hierarchy.
• Use logging, debugging, and error handling techniques to identify problems, troubleshoot them, and provide helpful feedback and information for problems that need to be fixed.

Key Takeaway: WebdriverIO best practices are to use descriptive names for tests and page objects, verify results with assertions instead of manual inspection, choose stable selectors over hardcoded values, and replace fixed delays with waits and timeouts.

Conclusion

WebDriverIO is a popular automation testing tool for web applications, and it is widely used in the industry due to its flexibility, scalability, and ease of use. To succeed in your profession, regardless of your level of automated testing experience, you need a firm grasp of the fundamental ideas and best practices of WebDriverIO. It can be helpful to use this list of 35 WebDriverIO interview questions and answers to brush up on the tool's features or to prepare for job interviews, as it covers a variety of concepts and difficulty levels. You can increase the effectiveness and quality of your automation testing efforts and deliver better results for your team and organization by grasping the fundamental ideas and methods of WebDriverIO.