Manage React DOM with Serenity BDD Screenplay

Question

Good evening community. I would like to receive comments or help on how to automate a REACT application with serenity BDD and Screenplay. Basically the problem I have is the following: I have a registration form divided into steps, according to the step the view is shown, for example, in step 1 you enter mail and confirmation, in the next step you enter names and surnames and so on until you finish the registration.

How I am doing the process: A task that contains all the steps of the registry was generated, this works very well if all the steps are executed in the same task, but when I want to separate each step in a new implementation, when executing the process, the first step (confirmation and mail ) run well, but the following (names and surnames) can not find the items, the process is looking for the email and password identifiers.

I assume it is because of the virtual DOM that REACT handles. I still can't find the answer of how to handle the current context and make the process find the current elements in the DOM.

@Step("{0} fill the what's your name step")
@Override
public <T extends Actor> void performAs(T actor) {
    actor.attemptsTo(
        Refresh.theBrowserSession(),
        JavaScriptClick.on(TXT_FIRST_NAME),
        Click.on(TXT_FIRST_NAME),
        Enter.theValue(firstName).into(TXT_FIRST_NAME),
        Click.on(TXT_LAST_NAME),
        Enter.theValue(lastName).into(TXT_LAST_NAME),
        Click.on(BTN_CONTINUE_NAME),
        Click.on(TXT_BIRTHDAY),
        Enter.theValue("06/08/1989").into(TXT_BIRTHDAY),
        Click.on(BTN_CONTINUE_BIRTHDAY),
        Click.on(RADIO_GENDER),
        Click.on(BTN_CONTINUE_GENDER)
    );
}

Reference in step definition class.

@And("^I fill the (.*) and confirmation email step$")
public void iFillTheEmailAndConfirmationEmailStep(String email) {
    email = faker.internet().emailAddress();
    theActorInTheSpotlight().attemptsTo(Registration.with(email));
    String saveEmail = String.valueOf(TXT_EMAIL.resolveFor(theActorInTheSpotlight()).getText());
    theActorInTheSpotlight().remember("email", saveEmail);
    String emailConfirmation = theActorInTheSpotlight().recall("email");
    theActorInTheSpotlight().attemptsTo(Registration.with(emailConfirmation));
}

@And("^I fill the step whats your name with (.*) and (.*)$")
public void iFillTheStepWhatsYourNameWithFirstNameAndLastName(String firstName, String lastName) {
    firstName = faker.name().firstName();
    lastName = faker.name().lastName();
    theActorInTheSpotlight().attemptsTo(EnterText.name(firstName, lastName));
}

This is the error that throws the console

[Test worker] ERROR net.thucydides.core.steps.ConsoleLoggingListener - TEST FAILED AT STEP And I fill the email and confirmation email step
    [Test worker] ERROR net.thucydides.core.steps.ConsoleLoggingListener - no such element: Unable to locate element: {"method":"css selector","selector":"*[name='email']"}

    no such element: Unable to locate element: {"method":"css selector","selector":"*[name='email']"}
      (Session info: chrome=80.0.3987.122)
    For documentation on this error, please visit: https://www.seleniumhq.org/exceptions/no_such_element.html

Answer 1

This error message...

no such element: Unable to locate element: {"method":"css selector","selector":"*[name='email']"}

...implies that there was a issue in the Locator Strategy you have used.

---

*[name='email'] is not a valid css-selectors . You need to remove the asterisk ie * to make it a valid css selector . So effectively you have to use:

• cssSelector :

   [name='email']

• xpath :

   //*[@name='email']