WebdriverIO TypeScript Getting Started with Jasmine

  • Home / Web Development / WebdriverIO TypeScript Getting…

WebdriverIO TypeScript Getting Started with Jasmine

What is WebdriverIO?

WebdriverIO Is a progressive automation framework designed to automate modern web and mobile applications. It simplifies the interaction with your app and provides a set of plugins that help you create scalable, robust, and flakiness test suits. WebdriverIO is built on top Selenium node JS restrictions.

The web driver is IO open source Framework through management Open JS The W3 Framework bases and adheres to architectural standards

Compared to Selenium, WebDrive is better because it provides you with a ready-made framework with easy setup and configuration.

What are the main features of Webdriverio?

Let’s discuss the benefits of using WebdriverIO in test automation.

Extensible: Adding a combination of helpful functions, or more complex sets and existing commands is easy and really useful.

Cross browser testingWebdriverIO supports almost all different types of browsers, including Safari, Chrome, Edge, Firefox.

Cross-platform support: WebdriverIO Node is a JS-based automation framework that supports all major operating systems, including Mac and Windows. Therefore, you can run your platform on different platforms and make sure that your application is working as expected.

Native mobile application support: WebdriverIO not only supports web applications but also mobile applications so that you can test all mobile applications accordingly.

Easy setup: WebdriverIO is very easy to set up. This is just some package installation and then config file creation. We are going to demonstrate this in this tutorial.

Emphasis library support: WebdriverIO supports key claim libraries such as Jasmine, Mocha, etc. This allows you to write your automation framework seamlessly.

Community support: Social collaboration is great for this WebriverIO. There are many articles and knowledge bases available on the Internet so you can learn and build on your own structure.

This detailed tutorial explains the following:

  • How to configure WebdriverIO Page Object Model project from scratch using TypeScript and Jasmine.
  • How to install WebdriverIO alias WDIO CLI in your project.
  • How to configure TypeScript in WebdriverIO.
  • How to configure wdio.conf.ts in WebdriverIO project.
  • How to create a first page object file in WebdriverIO and TypeScript.
  • How to make the first test in WebdriverIO.
  • How to Execute WebdriverIO (WDIO)
  • How to view results in WebdriverIO CLI.

How to set up Webdriverio type script framework from scratch

In this detailed tutorial, we are going to explain how to easily configure a WebdriverIO (WDIO) test automation project with a typewriter and a page object model with Jasmine.


Step 1: Create a new folder (example: WebdriverIOTypScript)

Go to any of your drives. Make a fresh one New folder (Example: WebdriverIOTypescript).

Step 2: Create a Pack.json for your WebdriverIO project

Make one pacakge.json File

In your newly created Project folder, Open a command prompt and type:

npm init

The above command asks you a set of default questions. Just hit [Enter] [Enter] Unless you want to tell. Once everything is done, it will be created pacakge.json One of your files Project folder.

Step 3: Open the project folder in the Visual Studio Code IDE

In Visual Studio Code, click File > Open up > Select newly created Project folder > Click On Select folder.

Opening project folder screenshot.

Step 4: Installing the WebdriverIO command line interface, also known as WDIO CLI

We’ve opened our Project folder in Visual Studio Code IDE, so let’s start the installation with WebdriverIO. To install the web driver IoT. , We need to use npm pacakge @ wdio / cli.

In you Visual Studio Code, Open Terminal

Go to Terminal menu Click on> New terminal.

Enter the following command to install WebDrive on your machine:

npm install - save-dev @wdio/cli

Wait for the installation to finish!

Completing the installation screenshot.

Step 5: Configuring the Web Driver for Your End Test Automation Project

Once Vari Drive is installed, we need to set up WDIO for the first time. wdio configuration Command.

From your visual studio code Terminal, Enter the following command:

npx wdio config

The command line indicates a set of options. Give the following answers:

  • Where is your automation backend located? On my local machine
  • Which framework do you want to use? J.asmine.
  • Do you want to use the compiler? Type script (https://www.typescriptlang.org/).
  • Where are your test glasses located? ./test/specs/**/*.ts
  • Do you want WebdriverIO to generate some test files yourself? no.
  • Which reporter do you want to use? چشمی
  • Do you want to add the service to your test setup? C.hrome driver
  • What is a base URL? Http: // localhost

Step 5 Screenshot.

If you look at the above point, we are installing web driver IO for our test automation project, which uses TypeScript, Jasmine.

Once the above steps are completed, it will create the default configuration for you

Step 6: Configure the directory structure for the WebdriverIO TypeScript project

We are creating a typewriting WebdriverIO with the page object model, so we need to follow the folder structure below.

  • Create a folder with the name Trial In your root project folder.
  • Under Trial Folder, create two folders: Pages And چشمی

The folder structure should look like the following:


Step 6 Screenshot.

Step 7: Installing TypeScript and ts-node npm packages for WebDriverIO project

In your Visual Studio code terminal, type the following command to install the type script and ts-node:

npm install typescript ts-node --save-dev

Note: If you select the TypeScript option during web driver setup time, these packages were already installed. Just make sure it’s installed correctly.

Step 8: Create a tsconfig.json file for the WebdriverIO project

Open the Visual Studio code Terminal, And type below Command:

npx tsc --init

The above one will create tsconfig.json File in you Project Route Directory

Creating a file in the directory screenshot.

Step 9: Create a tsconfig.json file in the WebdriverIO project

Remove the default generated code, and insert it into the code below tsconfig.json:

  "compilerOptions": {
    "target": "es2019",
    "types": [
  "include": [

Step 10: Configure the wdio.conf.ts file

wdio.conf.ts The file already contains a lot of self-generated code, so we don’t need them all. You can copy and paste the following code:

export const config: WebdriverIO.Config = {
 specs: [
 capabilities: [{
        browserName: 'chrome', 
        maxInstances: 1,       
    framework: 'Jasmine',  
    jasmineOpts: {
        defaultTimeoutInterval: 120000,
    autoCompileOpts: {
        autoCompile: true,
        // for all available options
        tsNodeOpts: {
            transpileOnly: true,
            project: 'tsconfig.json'

Step 11: Write your first page object file for the WebdriverIO TypeScript project

Let’s try to make a simple Google search test case.

Go to Test Open the folder Pages Folder, and create a new file For example.

So, instead of For example Is Test / pages / example.page.ts.

Add the code below:

class ExampleClass{
    get  searchInput() { return  $("input[name="q"]")}
    get searchButton() {return $('input[name="btnK"]')}
    get firstResult() {return $('(//h3)[1]')}
export default new ExampleClass()

Adding code screenshot.

Step 12: Write your first report file for the WebdriverIO TypeScript project

Go to Test / specs / , And create a new file example.spec.ts

Copy and paste the following code For example

import ExampleClass from "../pages/example.page"
describe('Google Search', () => {
  it('should search for sepcified text',async() => {
    await browser.url('https://www.google.com');
    await (await ExampleClass.searchInput).setValue("Webdriver IO Search Example");
    await browser.keys('Enter')
    await expect(await((await ExampleClass.firstResult).getText())).toContain("WebdriverIO")

Step 12, Paste the code screenshot.

Step 13: Perform WDIO type script tests

Once you have completed all of the above tests, run your tests with the command below.

npx wdio run ./wdio.conf.ts

Step 14: WDIO test results in console

The tests begin to be implemented, and you will see the results in the command line:

Results in the command line screenshot.

Issues you may encounter while configuring WebDrive

Why Chrome browser is not launching in WebdriverIO?

This issue is mostly related to your configuration file, ie wdio.conf.ts. Check your settings carefully.

I asked, “Why am I getting .setText ()? Click () WebdriverIO doesn’t have function?”

If you are using async format, you will usually find this. Wait for your web element to wait.

Why isn’t my WebdriverIO test being implemented?

Sometimes there are many examples of selenium web drivers, which can cause your tests to behave strangely when you perform them. You will have to restart the system or eliminate all web driver incidents.

Frequently Asked Questions on WebdriverIO

  • Is WebdriverIO Selenium Based?

Yes, WebdriverIO internally uses selenium node JS restrictions.

  • Does WebdriverIO support native mobile apps?

Yes, WDIO supports native mobile apps.

  • What are the selectors supported in WebdriverIO?

WebdriverIO supports all major selectors, including CSS selectors and Express.

  • What are WebdriverIO supported browsers?

WebdriverIO supports all major browsers:

  • Chrome – Chrome driver
  • Firefox – Geckodriver
  • Microsoft Edge – Edge driver
  • Internet Explorer – Internet Explorer driver
  • Safari Safari driver
  • Can I configure the WebDrive project in CI / CD tools like Jenkins, Azure DevOps, etc.?

Yes, WebdriverIO projects can be configured in CI / CD tools.

  • What are the frameworks or claim libraries WebdriverIO supports?

WebdriverIO currently supports Mocha, Jasmine, and Cucumber claim libraries or frameworks.

  • Does WebdriverIO support run tests in parallel?

Yes, WebdriverIO supports parallel test runs. All you need to do is configure it wdio.conf File for it.

  • How do I run a single space or test file in WebdriverIO?

You can use the following command to run your specific style or test in WebDriverIO.

npx wdio run ./wdio.conf.js –spec test / specs / example.e2e.js

  • How can I take screenshots on WebdriverIO?

WebdriverIO provides screenshot capability. See a detailed article on how to take a screenshot of this website.

Encourage me to buy more coffee and write more articles.

Contact me if you are looking for any help, support, or guidance.


Write a Comment

Your email address will not be published. Required fields are marked *