单击元素一次给出错误，单击两次可以正常工作，为什么？ （量角器）

Question

我正在使用Protractor在网站上进行端到端测试，其中之一是行为异常。当我第一次尝试指定代码以单击一次元素时，出现以下错误。

问题功能：

  fooField = element(by.css('#inputFoo'));
  foosList = $$('[type=radio]');

  async chooseFoo(id: number) {
    const foo = this.foosList.get(id - 1);
    // await browser.sleep(2000);
    // await this.fooField.click();
    await this.fooField.click();
    await browser.sleep(this.sleepTime);
    await foo.click();
    await this.selectFooButton.click();
  }

错误：

**************************************************
*                    Failures                    *
**************************************************

1) reimbursement request page should allow a user to register a request
  - Failed: element not interactable
    (Session info: chrome=72.0.3626.81)
    (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.15.0-45-generic x86_64)

Executed 2 of 2 specs (1 FAILED) in 28 secs.
[16:50:44] I/launcher - 0 instance(s) of WebDriver still running
[16:50:44] I/launcher - chrome #01 failed 1 test(s)
[16:50:44] I/launcher - overall: 1 failed spec(s)
[16:50:44] E/launcher - Process exited with error code 1
An unexpected error occurred: undefined

更改代码以连续两次单击该元素，然后再进行其他更改，则代码成功运行。我还尝试了删除多余的点击，并在点击之前添加了睡眠，但是我仍然遇到相同的错误。为什么会这样？

Answer 1

不确定要尝试单击哪个元素，但是在遇到类似问题时，这种单击方式对我有帮助：

browser.executeScript('arguments[0].click()', elementToClick);

Answer 2

let fooField = element(by.css('#inputFoo'));
await browser.wait(ExpectedConditions.elementToBeClickable(fooField), 5000, 'Element is not clickable.');
await fooField.click();

如果在一定时间后该元素不可单击，将引发错误，则按钮存在问题。某些东西正在阻止它，请点击。

另一种绕过它的方法（不是最好的方法）是使用javascript点击。

let fooField = element(by.css('#inputFoo'));
browser.executeScript('arguments[0].scrollIntoView(true); arguments[0].click();', fooField);