webdriver - 与元素交互抛出陈旧元素引用

Question

我有这个网站:http://embed.plnkr.co/Bs5iDqtXSSnvye2ORI6k/preview

代码:

var app = angular.module('plunker', []);

var a = new Array(1000);

for (var i = 0; i< 1000; i++) {
  a[i] = 'Name' + i;
}

app.controller('MainCtrl', function($scope, $interval) {
  $scope.names = a;

  $scope.start = function () {
    $interval(function () {
      $scope.names.pop();
    }, 50);
  }
});

以及以下规范:

'use strict';

describe('Name list', function () {
    it('should get the text of the last name', function () {
        browser.driver.get('http://embed.plnkr.co/Bs5iDqtXSSnvye2ORI6k/preview');
        browser.switchTo().frame(browser.driver.findElement(protractor.By.tagName('iframe')));
        element(by.buttonText('start')).click();
        expect(element.all(by.tagName('span)).last().getText()).toBe('Name999');
    });
});

这个配置:

'use strict';

// An example configuration file.
exports.config = {
    baseUrl: 'http://localhost:3000',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['stale.spec.js']
};

当我运行 Protractor 时，出现以下错误:

StaleElementReferenceError: stale element reference: element is not attached to the page document (Session info: chrome=43.0.2357.81)
(Driver info: chromedriver=2.15.322455 (ae8db840dac8d0c453355d3d922c91adfb61df8f),platform=Mac OS X 10.10.3 x86_64) (WARNING: The server did not provide any stacktrace information) Command duration or timeout: 9 milliseconds For documentation on this error, please visit: http://seleniumhq.org/exceptions/stale_element_reference.html Build info: version: '2.45.0', revision: '5017cb8', time: '2015-02-26 23:59:50' System info: host: 'ITs-MacBook-Pro.local', ip: '129.192.20.150', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.10.3', java.version: '1.8.0_31' Driver info: org.openqa.selenium.chrome.ChromeDriver Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, chrome={userDataDir=/var/folders/rr/63848xd90yscgwpkfn8srbyh0000gq/T/.org.chromium.Chromium.rarNyX}, takesHeapSnapshot=true, databaseEnabled=false, handlesAlerts=true, version=43.0.2357.81, platform=MAC, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true}] Session ID: 235ec977a69d98c7f5b75a329e8111b2

这意味着我尝试与之交互的元素(获取元素的文本)不再附加到 DOM。这个例子真的是我的规范简单化。在我的真实规范中真正发生的是我尝试获取元素列表(由 ng-repeat 生成)的最后一个元素的文本。还发生的是模型更新，通过删除表示元素列表的数组的最后一个元素。上面的这个例子只是为了重现错误(每次)。

如果我注释掉这一行:element(by.buttonText('start')).click(); 规范成功。

Answer 1

我为此苦苦挣扎，并试图弄清楚为什么会发生这种情况。我首先想到的是指向列表最后一个元素的元素查找器是在交互完成之前很久就创建的，所以在创建元素查找器和交互。

我后来发现，元素是在交互完成之前找到的，每次与某物交互时。所以指向最后一个元素实际上应该指向与该元素交互的时间的最后一个元素。

使用 browser.pause() 我能够看到 WebDriver 真正做了什么，这是抛出错误的两个任务:

(pending) Task::414<WebDriver.findElements(By.tagName("span"))>
| | | | | | Task: WebDriver.findElements(By.tagName("span"))
| | | | | |     at Array.forEach (native)

在此期间，DOM 根据模型更新，列表的最后一个元素被分离。

(pending) Task::1170<WebElement.getText()>
| | | | | | Task: WebElement.getText()
| | | | | |     at Array.forEach (native)

DOM 在执行的这个小漏洞中更新。目前模型每 50 毫秒更新一次，这肯定会引发陈旧元素引用错误。但是如果我将间隔增加到 1000 毫秒，那么出现错误的机会就会少得多。因此，如果出现此错误，这取决于您的计算机运行速度。

修复由您决定，但我希望有了这些信息应该更清楚该怎么做。