0

我正在处理一个涉及选择下拉列表的网页。我的工作是让它“功能化”，即显示正确的内容，同时让它“看起来很合理”。网页设计师稍后会来完善“外观和感觉”。

令我困惑的是，没有很好的方法来仅使用 css 设置 Html Select 元素的样式。我发现的所有框架/解决方案都涉及以下内容：

  • 隐藏原始选择元素

  • 使用<div> <span>或的组合<ul> <li>来模拟原生选择框

  • 插件javascript代码同步隐藏的原生选择框和<div> <span>模拟器中的数据。

我必须编写一个 selenium 客户端来测试网页的行为。

如果我将其编写为针对本机选择框进行测试，则使用上面显示的 3 个步骤进一步设置下拉列表样式将破坏测试，因为 selenium 不允许我单击隐藏元素。

如果我现在应用样式，并编写 selenium 客户端以单击 simulating <div><span>，那么我将来也冒着测试失败的风险。因为网页设计师稍后可能会选择不同的方式来设置选择框的样式，而我今天测试的元素可能会从页面中删除。

我想知道是否有人以前有过类似的经验，以及解决此类问题的最佳做法是什么。

4

1 回答 1

1

我发现你有两个选择（你已经找到了）。

本机组件的最小样式。一些浏览器允许你做一些样式，但主要是选择框的高度和宽度之类的东西，没什么太花哨的。这可能是避免中断的更好选择，因为它是本机的并且依赖于浏览器而不是插件。

或者你可以使用一个插件，因为你发现它做了一些花哨的工作来在元素之上创建一个 div。但是有各种各样的插件，它们之间的里程不同。

在当前项目中，我需要一个自定义选择框。我的脚本所做的是在选择框后面创建一个 div 并将选择框变为不透明度：0。用户认为他们正在单击花哨的 div，但实际上正在点击它前面的选择框（即使它不可见） . 当他们单击它时，它会弹出常规选择下拉列表。很酷。最好的部分是它只在页面加载时使用 javascript 来创建 div，其他一切都是原生控件。如果您需要有关这种方式的更多信息，我可以提供一个示例，但这是我在网上找到的。所以也许你也见过。

于 2013-10-21T16:55:24.117 回答