Custom Command for WebDriverIO Scripts – WDIO 104

In this article, I will tell how to create a custom commands for WebDriverIO. Eventhough WebdriverIO provides many additional features on top of Selenium or Appium, sometimes we need custom commands to do some actions properly.

Let’s go over the sample example of wait for the visiblity of an element then click/write something to the input field.

Step 1: Override / Create Method

Browser object has a method called addCommand. This is the method that lets you override or create a new functionality for browser object. Usage is as below

browser.addCommand(name, callback, elementScope)

So let’s create a new method called waitAndClick

return browser.addCommand("waitAndClick", async function () {
          await this.waitForDisplayed()
          console.log('I AM WAITING')
          await this.click()
          console.log('I CLICKED')
      }, true)
    },

So as you can see, after adding this async method all we did is implementing the standart methods of WDIO. First we wait, then we click. I added the logs into the cnsole so you can see that that functionality is called properly.

Step 2: Add the Command to our Script

In order to consume this new method, you need to add it to wdio.conf.ts file as below. As you might have read in previous articles, wdio.confg.ts contains the configuration of your project. And custom commands should exist in that file.

  before: function (capabilities, specs) {
      // Add commands to WebdriverIO
      return browser.addCommand("waitAndClick", async function () {
          await this.waitForDisplayed()
          console.log('I AM WAITING')
          await this.click()
          console.log('I CLICKED')
      }, true)
    },
}

 

Step 3: Use the New Command

Let’s open the login.page.ts file and change our click() method with waitAndClick(). So your source code will be changed to this

public async login (username: string, password: string) {
       await this.inputUsername.setValue(username);
       await this.inputPassword.setValue(password);
       await this.btnSubmit.waitAndClick();
   }

 

Step 4: Execute the Test Suite

After executing the script, check the console for the logs that we have added. Which means our new custom command is used and worked properly.

Step 5: How to Send Parameter to Custom Command

Not every function you will create will run without parameteres. Some new commands might take parameters. Like a new setValue method for an input field.

Let’s say we want to implement a strategy that first wait until the object is visible then set the value, we need to send a parameter to the new function. The only thing you need to do is add a parameter into the async function as below then use it.

before: function (capabilities, specs) {
      // Add commands to WebdriverIO
      return browser.addCommand("writeText", async function (param) {
          await this.waitForDisplayed()
          console.log('I AM WAITING')
          await this.setValue(param)
          console.log('I WROTE')
      }, true)
    },

Then you can change your code as below to use new command as we previously did.

public async login (username: string, password: string) {
     await this.inputUsername.writeText(username);
     await this.inputPassword.setValue(password);
     await this.btnSubmit.click();
 }

Voila!New command is executed.

Let’s meet in the next chapter of WebdriverIO tutorial.