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

Hi Christian, welcome to Stackoverflow. It would help you could provide information about what you have already tried to resolve this issue. Also, since it looks like Selenium is conplaining about missing DOM elements, if you could provide a minimal example of the input HTML — dovetalk, Mar 05 '20 at 02:56

score 0 · Answer 1 · answered Mar 05 '20 at 08:38

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 i.e. * to make it a valid css selector. So effectively you have to use:

cssSelector:
```
[name='email']
```
xpath:
```
//*[@name='email']
```

Manage React DOM with Serenity BDD Screenplay

1 Answers1