Flexible screenshot strategy

[benzaremean]

@zhibek @nemesisridiculii Just opening this issue so we could discuss flexible screenshot strategies. It is something I've planned to look into for a while and since you both raised PRs in the same area I thought we could discuss in an issue some requirements.

What else do you think we should cover in addition to what you raised in your PRs?

[Gordiievskyi]

Sorry if this thread is for something else. I can open a ticket if any. Take screen shot has bugs with async mode. Issue is in the hooks of the service:

  afterTest(test) {
    const { screenshotStrategy } = this.reporterOptions;
    if (screenshotStrategy === BEFORE_CLICK) {
      browser.takeScreenshot();
    }
    if (screenshotStrategy === ON_ERROR && !test.passed) {
      browser.takeScreenshot();
    }
  }

This code pretend to be sync in async mode, so screen shot is taken in next test. As states the docs : https://webdriver.io/docs/customservices.html you should do it async and in sync mode it would be handled by wdio to be (pseudo)sync, but in async mode your code will be handled by node js itself and so code will work in both modes.

So fix is simple:

  async afterTest(test) {
    const { screenshotStrategy } = this.reporterOptions;
    if (screenshotStrategy === BEFORE_CLICK) {
   await browser.takeScreenshot();
    }
    if (screenshotStrategy === ON_ERROR && !test.passed) {
    await  browser.takeScreenshot();
    }
  }

Same here

async  beforeCommand(commandName) {
    const { screenshotStrategy } = this.reporterOptions;
    if (screenshotStrategy === BEFORE_CLICK && 'click' === commandName) {
await  browser.takeScreenshot();
    }
  }

[nemesisridiculii]

@benzaremean I'm sorry that I didn't respond earlier. Somehow this didn't come to my attention.

What I was trying to achieve was to gather screenshots after each step in order to document actual results, so my pull request meets my needs. I like @zhibek's change to allow multiple strategies.

Other screenshot strategies that might be helpful:

• Take a screenshot of the element being clicked (takeElementScreenshot)
• Similarly, take a screenshot before click highlighting what is about to be clicked

[nemesisridiculii]

@Gordiievskyi: @benzaremean is the expert on this, so I'll defer to him, but I'm not following what you're requesting. The documentation you linked to indicates that the function does not need to return a promise, and the documeentation for takeScreenshot indicates that it is not async. What am I missing?

[Gordiievskyi]

@nemesisridiculii I don't want to say all, but I didn't find any wdio command that is sync(an its logical, node js is best in async network operation and webdriver is nothing more then http requests from client(wdio) to server(selenium or browser driver aka chomedriver ). The takeScreenshot particularly is async. So your code works only in sync mode when wdio handles it and other promise based code for you. You can check if wdio code is async just by console.log it in async mode.

The documentation I refer to (comment particularly):

    // If a hook returns a promise, WebdriverIO will wait until that promise is resolved to continue.
    async onPrepare(config, capabilities) {
        // TODO: something before all workers launch
    }

This code above work in both sync and async mode in the same way. But code below will fail in async mode if in TODO section there is any async code( promise in our case)

onPrepare(config, capabilities) {
        // TODO: something before all workers launch
    }