javascript - 是否可以使用 Robot Framework 验证 Bootstrap 的约束验证文本？

Question

我是一名实习生，负责机器人框架 UI 测试。对于一个测试用例，想法是为网站的登录表单提供密码，但将用户名字段留空。然后，当单击登录按钮时，会出现关于空用户名字段的文本“请填写此字段”，该文本仅显示几秒钟，然后消失。这个想法是在单击“登录”后验证该文本。

我试图找到“请填写此字段”——使用 Google Chrome 检查登录表单并查看网站源代码的文本，但无法从 HTML 站点结构或 JavaScript 文件中的任何地方找到该文本。我和一个开发者谈过，他说这个文本是由 Bootstrap 的验证提供的。然后我在谷歌上发现这个验证功能被称为约束验证和 required> 代码中的部分是添加该功能的部分。

不幸的是，我无法直接链接到我正在测试的站点，因为该站点位于只能由某些计算机访问的测试服务器上，而不是在生产中，但该站点是使用 Angular 构建的，例如用户名部分是检查时 ng-model="login_username"。

所以我的问题是，当我无法通过 xpath 指向“请填写此字段”文本时，是否有任何其他方法可以通过使用 Robot Framework 来验证此文本确实存在？我想也许将 JavaScript 添加到机器人代码中可以完成，但如果有人以前做过这样的测试，那么一个例子会有很大帮助。由于我今年早些时候开始研究机器人，所以我还没有太多机器人/JavaScript 组合的经验。

在下方“文本输入”-image 的链接中，显示的弹出窗口与仅提供密码并单击“登录”时显示的弹出窗口完全相同。因此，如果我理解正确的话，这是 Bootstrap 提供的标准验证。

https://css-tricks.com/form-validation-part-1-constraint-validation-html/

Answer 1

Page Should Contain | Please fill in this field是个好建议。
在检查页面时在 HTML 代码中发现要使用 Robot Framework 验证的文本之前，我已经成功使用该关键字。 在此测试中也尝试了该关键字，但没有成功。

我认为问题是因为在检查页面时无法在任何地方找到文本“请填写此字段。”，这可能是此关键字找不到文本的原因。我在谷歌搜索时发现其他人在检查时也试图找到相同的文本，但找不到，这就是它如此棘手的原因。 当用户名和密码都作为无效凭据提供时，使用我实际测试的相同表格，然后在检查时可以找到下面的这一行:
<p ng-show="$ctrl.loginError" class="text-red ng-binding" aria-hidden="false" style="">Unable to log in with provided credentials.</p>

因此 “无法使用提供的凭据登录” 是一个不同的文本，可以从 HTML 代码中找到。无效登录尝试后出现的特定文本(提供的用户名和密码均无效)在技术上的工作方式不同，我得到了该文本的 xpath，使用不同的测试用例测试使用用户名和密码登录失败。

用于处理该验证的机器人框架代码是这样的:

  ${text}    Get Text    xpath://p[@class="text-red ng-binding"]
  Should Be Equal as Strings    ${text}    Unable to log in with provided credentials.

该文本“无法使用提供的凭据登录”。 在进行了无效的登录尝试后也停留在那里。但是 “请填写此字段。” 出现几秒钟，当仅向登录表单提供密码时无法在任何地方找到并且无法指向使用 xpath。似乎也是 Page Should Contain无法验证该文本。

一段与测试登录表单相关的 HTML 代码(网站由开发人员使用 Angular 构建):

  <form name="passwordConfirm" class="login-form ng-pristine ng-valid ng-hide" ng-show="$ctrl.passwordConfirm" aria-hidden="true"> 
  <form class="login-form ng-invalid ng-invalid-required ng-invalid-recaptcha ng-dirty    ng-valid-parse" ng-show="$ctrl.passwordLogin" aria-hidden="false" style="">
  <p ng-show="$ctrl.loginError" class="text-red ng-binding ng-hide" aria-hidden="true"></p>
  <h5 class="input-header">Username</h5>
  <input ng-model="login_username" required="true" class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" aria-invalid="true" style="">
  <h5 class="input-header">Password</h5>
  <input ng-model="login_password" type="password" required="true" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" aria-invalid="false" style="">

Robot Framework-code，一个名为 EmptyUsername 的关键字，用于处理该表单的测试:

EmptyUsername
    [Documentation]    Test what happens when username-field is empty but password is given and Sign in-button is pressed.
    Comment    Verify that login-form is found
    Wait Until Page Contains Element    xpath://div[@class="login-form"]
    Wait Until Keyword Succeeds    2    1    Clear Element Text    xpath://input[@ng-model="login_username"]
    Comment    Input password as next step below
    Wait Until Keyword Succeeds    2    1    Input Text    xpath://input[@ng-model="login_password"]    abcd123
    Comment    Sign in-button is clicked as next step below
    Wait Until Keyword Succeeds    2    1    Click Element    xpath://button[@id="button-login"]
    Page Should Contain    Please fill in this field.

我在 stackoverflow 上找到了一些关于约束验证和验证的其他主题。似乎可能有一些解决方案，但我认为如何用 Robot 编写它有点棘手。

How to handle html5 constraint validation pop-up using Selenium?
How to validate html5 constraint validation message using Selenium-Webdriver and Java
How can I extract the text of HTML5 Constraint validation in https://www.phptravels.net/ website using Selenium and Java?
How to verify text in message generated by Constraint Validation API in HTML5?

我认为最接近(可能成功)与 Robot Framework 一起使用的是上面的最后一个链接，并且有那个部分 “请注意，即使它是一个属性，也可以使用 getAttribute 来获取 validationMessage:”
String message = driver.findElement(By.name("email")).getAttribute("validationMessage");

如果相同的想法可以用于 Robot，那么 JavaScript 语法将如何与 Robot 搭配使用。我知道 JavaScript 可以与 Robot 一起使用，但语法对我来说并不容易。