选择元素不可见 - Mac - Safari 11.1 - Selenium - C#答案

【问题标题】：Select element not visible - Mac - Safari 11.1 - Selenium - C#选择元素不可见 - Mac - Safari 11.1 - Selenium - C#
【发布时间】：2018-10-03 13:19:55
【问题描述】：

我正在测试我们网站的注册，其中一个字段是选择下拉菜单。该测试可在所有 Windows 桌面浏览器上完全运行。它也适用于 Mac 上的 Chrome。此问题仅在 Mac Safari 11.1 上出现：

当尝试选择我想要的选项时，它报告选择元素不可见。

我的测试是通过 Browserstack 在 Visual Studio 中完成的。我有屏幕截图和视频，清楚地表明选择元素是可见的（至少对用户是可见的）。它不在页面底部附近，没有页脚覆盖它的任何部分。我滚动到每个元素以与之交互。

我的故障排除：

为了查看 select 元素向下是否存在可访问性问题，我注释掉了与 select 元素交互并成功与它下方的元素交互的代码（文本输入框）。
我在尝试选择一个选项之前添加了 30 秒的等待时间，以防驱动程序/DOM“看到”选择元素时出现任何延迟 - 同样的错误。
我仔细检查了我的 XPath - 在我们的本地 Mac 上，XPath 仅返回 1 个结果，它是有问题的选择元素（当您通过 XPath 搜索代码时它会突出显示）。
我正在使用 Selenium.Support.UI 方法通过其文本选择一个选项。 'option' 保存文本以供选择：

SelectElement select = new SelectElement(element); select.SelectByText(option);

...所以我尝试通过更改索引通过 JavaScript 进行选择：

// Selects the option but no option change occurs from the user's perspective, nor are any events triggered based on the change
js.ExecuteScript("arguments[0].selectedIndex = \"" + optionIndex + "\";", element);
// Trigger the change event
js.ExecuteScript("var event = new Event('change', { bubbles: true }); arguments[0].dispatchEvent(event);", element);

...这也不起作用，没有得到“元素不可见”，没有发生任何变化，测试脚本继续进行下一个文本输入。

我通过在 Chrome 控制台上的 Windows 和 Safari 11.1 的 Mac 上手动测试验证了此方法是否有效（将选择元素的 ID 更改为 someID）：

var element = document.getElementById("someID");
element.selectedIndex = "3";
var event = new Event('change', { bubbles: true });
element.dispatchEvent(event);

...工作正常。

因此，无论我在运行实际测试时如何尝试更改元素，要么我变得不可见，要么什么也没有发生。好诡异……

我在这里错过了显而易见的事情吗？这有一个已知问题吗？我想检查这一点的唯一其他方法是从等式中删除 Browserstack 并在我们的 Mac 上进行本地测试。这可能是我应该做的第一件事......

【问题讨论】：

这是 selenium 的一个已知问题。更多细节在这里：github.com/SeleniumHQ/selenium/issues/5475

标签： c# selenium safari visible

【解决方案1】：

谢谢。

我在 JavaScript 解决方法上走在了正确的轨道上，但我的选择元素没有 ID，所以我必须先分配一个 ID，然后 JavaScript 才会更改选项...

js.ExecuteScript("arguments[0].setAttribute(\"id\", \"automationID\");", element);

js.ExecuteScript("var element = document.getElementById(\"automationID\"); element.selectedIndex = \"" + optionIndex + "\"; var event = new Event('change', { bubbles: true }); element.dispatchEvent(event);");

【讨论】：