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');
});
// 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. 🙌

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

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

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

Written by

I enjoy discussing topics related to Test Automation | Quality Assurance | Web Dev. Check out my Youtube channel — 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