Automation testing
5. How to use MAP?
How to use map in automation testing? WebdriverIO example

Let's start with: How does it work?

  • The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

This might look too smart and not clear. Let's just see an example:
// This is an example of helper method that uses map
   // Create object named hash
   let hash = {};

   // Loop through yourSelectors and fill up object with keys(text of each label with h1 tag), and values: "div a" selector so we could perform action on it
   $$('.fakeClasses').map(elem => hash[elem.$('h1').getText()] = elem.$('div a'));
   // Same as line above but: => hash[elem.getText()] = elem);

   // Performing actual action on it. Note, one of your labels that we got text of must match with parameter that yo will pass in(label)
How to debug map if it doesn't work?
Case one:
If you see following error, this means the parameter you are passing in:

  • doesn't exist
  • there is a race condition(it didn't show up yet, and click already happened)

There are few ways to debug it:

  • add browser.pause(2000) right before map. It will help if it's a race condition. If it is, then you will need to add waitUntil so all options would display before it actually maps them.
   let hash = {};
   $$('.fakeClasses').map(elem => hash[elem.$('h1').getText()] = elem.$('div a'));
  • add a browser.debug() right before map. It will stop browser and you will be able to see if you element exist and there was a race condition.
   let hash = {};
   $$('.fakeClasses').map(elem => hash[elem.$('h1').getText()] = elem.$('div a'));
  • console.log all options that you've mapped. This will show you all available options of "h1" tag that we have mapped.
   let hash = {};
   $$('.fakeClasses').map(elem => hash[elem.$('h1').getText()] = elem.$('div a'));
We will add video with example of it soon :)
We help ambitious people to get into Tech with no prior experience.