WebdriverIO — Reusable Functions

Image for post
Image for post
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');
});

✔️ 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 }
);
};

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.

SDET Architect | YouTuber | Tech Blogger | Love to explore new tools and technologies. Check out my YouTube channel — https://youtube.com/automationbro

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store