当我无头运行时我的测试失败了，因为它是不可见的答案

【问题标题】：my test is failing when I run headless because it is invisible当我无头运行时我的测试失败了，因为它是不可见的
【发布时间】：2019-12-13 17:22:01
【问题描述】：

我正在测试一个尝试选择下拉选项的 dotnet 应用程序。选择器从一开始就已经在 dom 中，但是在我单击下拉列表之前它们不会变得可见。

当我尝试单击该选项时，它会说它不可见。就在我单击之前，我记录它是否可见。在Firefox中，它说它是可见的，在chrome中它说它不是。

不管怎样，当没有无头运行时，两者都会点击下拉选项。下面是代码和日志输出：

代码：

  /**
   * Selects a dropdown option based on the passed-in criteria
   *
   * @private
   * @param {TestController} t
   * @param {(Selector | SelectorPromise)} fieldSelector The selector of the dropdown field
   * @param {string} [text] If searching by text displayed
   * @param {string} [value] If searching by underlying value="yourVal"
   * @param {number} [index=-1] If searching by a specific index
   * @param {boolean} [randomly=null] Chooses random option
   * @param {boolean} [exactText=null] Uses exact text on string compare
   * @returns {Promise<void>}
   * @memberof CorePage
   */
  private async selectDropdownOption(
    t: TestController,
    fieldSelector: Selector | SelectorPromise,
    text?: string,
    value?: string,
    index: number = -1,
    randomly: boolean = null,
    exactText: boolean = null
  ): Promise<void> {
    await this.wait(t).then(async () => {
      await t.click(fieldSelector);
      const options = fieldSelector.find('option');
      const fieldName: string = await fieldSelector.getAttribute('name');
      await t
        .expect(await options.count)
        .gt(0, `${fieldName} dropdown did not contain any options.`);
      const assertMsg = `${fieldName} dropdown: The option ${text} that we wanted was not found.`;
      let selectedElement: Selector;

      if (text) {
        selectedElement = exactText
          ? options.withExactText(text).nth(0)
          : options.withText(text).nth(0);
      } else if (value) {
        selectedElement = options.parent().find(`option[value='${value}']`);
      } else if (index > -1) {
        selectedElement = options.nth(index);
      } else if (randomly) {
        if ((await options.count) === 1) {
          selectedElement = options.nth(0);
        } else {
          // change with caution. We don't want to allow the selection of the first option as it may be null
          const randomIndex: number = this.getRandomInt(1, (await options.count) - 1);
          selectedElement = options.nth(randomIndex);
        }
      }
      await this.waitForElement(t, selectedElement);
      console.log(await selectedElement.visible);
      await t
        .expect(await selectedElement.exists)
        .ok(assertMsg)
        .click(selectedElement);
    });
  }

AddUsers
true
 × add Random User and Assert Exists

   1) The element that matches the specified selector is not visible.

      Browser: Firefox 70.0 / Windows 10

         285 |      await this.waitForElement(t, selectedElement);
         286 |      console.log(await selectedElement.visible);
         287 |      await t
         288 |        .expect(await selectedElement.exists)
         289 |        .ok(assertMsg)
       > 290 |        .click(selectedElement);
         291 |    });
         292 |  }
         293 |
         294 |  /**
         295 |   *

请注意，waitforelement() 会等待一个元素存在并且最长可见 10 秒，并注意我将随机选择一个选项传递给此函数。

【问题讨论】：

仅通过测试代码很难找到原因。所有浏览器中的选项数量是否相同？您能否提供您页面的 URL 或一个可重现的小示例？

标签： typescript automated-tests e2e-testing testcafe web-testing

【解决方案1】：

当发生这种情况时，请尝试截取屏幕截图或视频。拍摄屏幕截图后，我意识到当我在屏幕上运行时，日期弹出窗口显示在顶部，但由于自动全屏基于页面是日期弹出窗口调整的位置而在无头运行时显示在底部。如果它出现在底部，它会覆盖我试图点击的下一个元素。在填写上一个字段后添加一个简单的按键 esc 修复它

【讨论】：