使用 Serenity BDD 剧本管理 React DOM答案

【问题标题】：Manage React DOM with Serenity BDD Screenplay使用 Serenity BDD 剧本管理 React DOM
【发布时间】：2020-06-17 14:33:03
【问题描述】：

晚安社区。我想收到 cmets 或有关如何使用 serenity BDD 和 Screenplay 自动化 REACT 应用程序的帮助。基本上我遇到的问题如下：我有一个注册表，分步骤，按步骤显示视图，例如第一步输入邮件和确认，下一步输入姓名等等，直到完成注册。

我是如何做这个过程的：生成了一个包含注册表所有步骤的任务，如果所有步骤都在同一个任务中执行，则效果很好，但是当我想在新实现中分离每个步骤时，在执行流程时，第一步（确认和邮件）运行良好，但以下（姓名和姓氏）找不到项目，该过程正在寻找电子邮件和密码标识符。

我认为这是因为 REACT 处理的虚拟 DOM。我仍然找不到如何处理当前上下文并让进程在 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)
    );
}

步骤定义类中的引用。

@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));
}

这是抛出控制台的错误

[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

【问题讨论】：

嗨克里斯蒂安，欢迎来到 Stackoverflow。它将帮助您提供有关您已尝试解决此问题的信息。此外，由于 Selenium 似乎在抱怨缺少 DOM 元素，如果您可以提供输入 HTML 的最小示例

标签： java reactjs selenium ui-automation browser-automation

【解决方案1】：

此错误消息...

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

...表示您使用的Locator Strategy 存在问题。

*[name='email'] 不是有效的css-selectors。您需要删除星号，即 * 以使其成为有效的 css 选择器。你必须如此有效地使用：

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

【讨论】：