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

Question

我正在测试尝试 select 下拉选项的 dotnet 应用程序。 select 或从一开始就已经在 dom 内，但在我单击下拉菜单之前它们不会显示。

当我尝试点击该选项时，它失败了，说它不可见。在我点击之前，我会记录它是否可见。在 firefox 中，它说它是可见的，在 chrome 中它说它不可见。

不管两者在非 运行 headless 时都会点击下拉选项。下面是代码和日志输出：

代码：

  /**
   * 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 秒，请注意我正在向 select 传递一个选项 运行domly功能。

Answer 1

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