How to click on all anchor elements on a webpage using webdriver.io

Question

I am trying to browse to this url - https://gallant-meitner-86c223.netlify.com/#/, check the count of the a[href] links on the page, click on them and verify that the person exists

wdio.conf.js

exports.config = {
  runner: 'local',
  specs: [
    'test/e2e/**/*.js'
  ],
  maxInstances: 10,
  capabilities: [{
    maxInstances: 5,
    browserName: 'firefox'
  }],
  logLevel: 'info',
  bail: 0,
  baseUrl: 'http://localhost:8080',
  waitforTimeout: 10000,
  connectionRetryTimeout: 90000,
  connectionRetryCount: 3,
  services: ['selenium-standalone'],
  framework: 'jasmine',
  reporters: ['spec', 'junit'],
  jasmineNodeOpts: {
   defaultTimeoutInterval: 60000,
  }

My Test

describe('Home', () => {
  it('should get count of the links and click on them and verify the person exists', async () => {
       await browser.url('/')
    const title = await browser.getTitle()
    expect(title).toBe('Force Vue Awakens')
    // This doesn't work as well
    const links = $$('#links a')
    const count = links.length
    expect(count).toBe(10)
    links.forEach((link) => {
      link.click()
      // Dont know how to verify each person after clicking the link
    })

  })
})

I am new to automated testing and web driverio. Any help or a fiddle will be greatly appreciated!

Answer 1

forEach() method does not work properly with functions that returns Promise. You can use for it for ... of construction. Also keep in mind if you use webdriver-io in async mode you should always resolve methods that returns Promise as well. Take a look at refactoring test:

describe('Home', () => {
  it('should get count of the links and click on them and verify the person exists', async () => {
    await browser.url('/')
    const title = await browser.getTitle()
    expect(title).toBe('Force Vue Awakens')
    const links = await $$('#links a') //here you missed await
    const count = links.length
    expect(count).toBe(10)
    const beforeUrl = await browser.getUrl()
    for (let link of links) {
      await link.click();
      const afterUrl = await browser.getUrl()
      expect(afterUrl).not.Equal(beforeUrl) // here use your assertion library
    } 

  })
})