WebdriverIO — Reusable Functions

https://www.youtube.com/watch?v=XEqbOMc0hf0

As you start expanding your test framework, you may often find yourself reusing the same code in multiple places causing test maintenance to become difficult in the long run.

You can optimize many of your tests by reusing your code and taking advantage of helper functions. Let’s take a look at some examples below:

❌ Wrong Way
Repeating same code multiple times all over the place -

it('should update the search category', () => {
    browser.waitUntil(
      function () {
        return SearchPage.category.getText() === 'PC Laptops & Netbooks';
      },
      { timeout: 3000 }
    );
    expect(SearchPage.category).toHaveText('PC Laptops & Netbooks');
  });
// I'm repeating pretty much exact same code below
// for a similar scenario
it('should update text after clicking button', () => {
    browser.waitUntil(
      function () {
        return OtherPage.selector.getText() === 'Some text';
      },
      { timeout: 3000 }
    );
    expect(OtherPage.selector).toHaveText('Some text');
  });

✔️ Right Way
Reusing code by creating a helper function

// create a helper file ex: helper.js
// In that file, create a reusable function with generic params for your scenario
export const waitForTextChange = (el, text, timeout) => {
  browser.waitUntil(
    function () {
      return el.getText() === text;
    },
    { timeout }
  );
};
// Import the reusable function in your tests
it('should update the search category', () => {
    waitForTextChange(SearchPage.category, 'PC Laptops & Netbooks', 3000);
    expect(SearchPage.category).toHaveText('PC Laptops & Netbooks');
  });
it('should update text after clicking button', () => {
   waitForTextChange(OtherPage.selector, 'Some Text', 3000);
   expect(OtherPage.selector).toHaveText('Some text');
  });

As you can see, we reduced multiple lines of code into a single line using reusable functions by simply taking advantage of plain JavaScript. 🙌

Check out the video below for a detailed explanation of the code above, as well as some other quick tips on how to optimize your test framework.

https://www.youtube.com/watch?v=XEqbOMc0hf0

💎 This code is also available on GitHub for you to access and play around with.

To learn more about WebdriverIO, check out my free tutorial series on Youtube -

https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.