upgrading serenity/JS 2.0 + protractor to serenity/JS 3.0 + webdriverIO

[waleedKhalidCalrom]

@jan-molak
I am facing Issue during upgrading from protractor to webdriverIO + serenity/JS 3.0

here is pervious code where I am using protractor

import { Wait } from '@serenity-js/protractor';
import { by, element } from 'protractor';

describe(' process', () => {
  
  it('actor checks the future step', () =>
    element.all(by.css('.page-steps__step--future')).first().getText().then(function (text) {
      if (text.indexOf('Extras') > -1) {
        futureStep = 'Extras';
        console.log('Future step set to {0}', futureStep);
      }
    }));
  
  it('actor goes to extras screen', () => {
    if (futureStep !== 'Extras') {
      return;
    }
    actorCalled('Jasmine').attemptsTo(
      Wait.for(Duration.ofSeconds(20)),
      ContinueToExtras());
  });
  
  it('actor waits for the extras to appear', () => {
    if (futureStep !== 'Extras') {
      return;
    }
    actorCalled('Jasmine').attemptsTo(
      WaitForExtrasToAppear());
  });
});

how can I rewrite the logic using latest version of Serenity/JS 3

    it('actor checks the future step', () =>
      element.all(by.css('.page-steps__step--future')).first().getText().then(function (text) {
        if (text.indexOf('Extras') > -1) {
          futureStep = 'Extras';
          console.log('Future step set to {0}', futureStep);
        }
    }));

in Serenity/JS 3 getText().then not available

[jan-molak]

OK, there's quite a few things that could be improved in this snippet:

• It looks like the 2nd and 3rd scenarios depend on the first scenario setting the futureStep variable; Instead, consider using a beforeAll or beforeEach hooks
• Making a test scenario wait for 20 seconds can make it flakey. Instead, consider using Wait.until
• Remember that calling actor.attemptsTo returns a Promise. You'll need to use async/await or return the Promise to Jasmine to ensure your test runner is correctly synchronised with your scenario.

To answer your immediate question, though, let's look at what the old Protractor code was doing:

describe('My feature', () = > {
  
  let futureStep;

  // ...

  await element.all(by.css('.page-steps__step--future'))
    .first()
    .getText()
    .then(function (text) {
      if (text.indexOf('Extras') > -1) {
        futureStep = 'Extras';
      }
    })

  // ...
})

First, you'll need to identify the page elements of interest (You can learn more about it in my article on the Page Element Query Language):

import { PageElements, By } from '@serenity-js/web'

const steps = () =>
  PageElements.located(By.css('.page-steps__step--future'))
    .describedAs('steps')

Next, I'm guessing that you'd want a condition that should the steps contain one that's called Extras, the actor should proceed with the scenario:

import { actorCalled, Check } from '@serenity-js/core'
import { contain } from '@serenity-js/assertions'

describe('my feature', () => {

  it('some scenario scenario', async () => {
    
    await actorCalled('Jasmine').attemptsTo(
      Check.whether(Text.ofAll(steps()), contain('Extras'))
        .andIfSo(
          //...
        )
    )
  });
});

[waleedKhalidCalrom]

@jan-molak Thanks you its very helpful.