等待元素更改其值(文本）

Wait for element to change its value(text)

本文关键字：文本 元素 等待      更新时间：2023-09-26

我在使用量角器的第三天，在等待页面加载和元素出现方面，我经常遇到金砖四面墙。特别是这个测试用例变得丑陋，我想解决这些问题而不必依赖睡眠。

我目前"在AngularJS的土地之外"

it('it should reflect in both the field and the title when the personnel name is changed', function() {
  var inputField, personnelHeader, personnelName;
  personnelName = element(By.css(".overlay.editnameoverlay")).click();
  personnelHeader = element(By.id("personnel_name_header"));
  inputField = element(By.css("input[name='newvalue']"));
  inputField.clear();
  inputField.sendKeys("Test 123");
  element(By.css("input[name='ok_button']")).click();
  // browser.driver.sleep(2000); This test only works with this sleep added
  browser.wait(function() {
    console.log("Waiting for header to change...");
    return personnelHeader.getText().then(function(text) {
      return text === "Test 123";
    });
  }, 5000);
  return expect(personnelHeader.getText()).toBe(personnelName.getText());
});

因此，此处的测试会更改输入字段中的名称。 提交它并等待更改反映在模态的标头中。问题是没有browser.driver.sleep（2000）我得到一个错误说

Stacktrace:
     StaleElementReferenceError: stale element reference: element is not attached to the page document

在这种特殊情况下，我该如何解决这个问题？

来自预期条件的文档：

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to contain the text 'foo'.
browser.wait(EC.textToBePresentInElement($('#abc'), 'foo'), 5000);

当您使用量角器测试非角度页面时，您需要自己等待元素准备好进行交互。

StaleElementReferenceError可能是最无用的硒错误，它发生在元素从 DOM 中删除但仍以某种方式缓存时，我在开始使用量角器时也遇到了这个问题，甚至试图说服它应该自动重试量角器端。

对我来说，解决方案是始终使用自定义函数显式等待元素出现在页面上，waitReady()该函数browser.wait准备好的元素，即：等待元素准备好进行交互：

    expect($('#login_field').waitReady()).toBeTruthy();

首先将此代码片段集成到代码中：https://gist.github.com/elgalu/2939aad2b2e31418c1bb

自定义waitReady()不仅会等待元素，而且还会吞下任何不相关的无用 Web 驱动程序错误，例如StaleElementReferenceError，并且只会重试直到找到元素，否则它将超时。

因此，在交互之前，即在clear()或sendKeys()或click()之前waitReady()每个元素......

// TODO: Move to Page Objects module
var personnelNameElm = $(".overlay.editnameoverlay");
var personnelHeaderElm = $("#personnel_name_header");
var inputFieldElm = $("input[name='newvalue']");
var okBtnElm = $("input[name='ok_button']");
it('it should reflect in both the field and the title when the ' +
    'personnel name is changed', function() {
  expect(personnelNameElm.waitReady()).toBeTruthy();
  personnelNameElm.click();
  expect(inputFieldElm.waitReady()).toBeTruthy();
  inputFieldElm.clear().sendKeys("Test 123");
  expect(okBtnElm.waitReady()).toBeTruthy();
  okBtnElm.click();
  browser.wait(function() {
    console.log("Waiting for header to change...");
    // Using waitReady() before getText() avoids Stale element errors
    return personnelHeaderElm.waitReady().then(function() {
      return personnelHeaderElm.getText().then(function(text) {
        return text === "Test 123";
      });
    });
  }, 5000);
  expect(personnelHeaderElm.getText()).toEqual(personnelNameElm.getText());
});
相关文章：