SDET Unicorns

WebdriverIO – Reusable Functions

Table of Content

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.

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


To learn more about WebdriverIO, you can check out my free tutorial series here –

WebdriverIO – Tutorial Series for Beginners

My Resources

Thrive Suite: The all-in-one WordPress theme I used to create my blog.
Jasper AI: My favorite AI writing tool.
Surfer SEO:  A tool to help you rank your content on the first page of Google.

Write Content Faster

5/5

Write blog posts that rank for affiliate terms!

Join our mailing list

Unlock the Secrets to Becoming a SDET Pro in the Industry!

Stay ahead of the curve! Join our mailing list for exclusive insights, tips, and the latest industry updates delivered straight to your inbox

Table of Content

Related Post

image

Common Types of Software Bugs

Dealing with bugs is one of the biggest headaches in the software development lifecycle. No matter how carefully someone writes code, it’s impossible to create a software product that works perfectly every time. Skipping detailed testing often causes major issues later on.

Read More »
How to inspect elements in Chrome?

How to Inspect Elements in Chrome?

Understanding how to use the “Inspect Element” feature in Chrome is a critical skill for web developers and designers alike. This tool is indispensable, no matter what web development task you’re tackling.

From resolving layout issues and debugging JavaScript to analyzing a webpage’s structure, Chrome’s Developer Tools’ “Elements” panel offers a robust suite of functionalities that enable you to delve into the HTML, CSS, and JavaScript that power websites.

Read More »