JavaScript将位置属性将位置属性更改为静态属性固定的每个样式答案

【问题标题】：Javascript to change the position attribute to static of every style where position attribute is fixedJavaScript将位置属性将位置属性更改为静态属性固定的每个样式
【发布时间】：2016-01-22 10:35:02
【问题描述】：

在使用 Selenium WebDriver 和 Chrome 进行一些网页抓取期间，我遇到了一个具有固定区域的页面（它们不滚动但相对于窗口保持固定）。通常，当我使用 Actions.MoveToElement() 请求 Web 浏览器滚动到特定控件时，该元素最终会被其中一个固定区域遮挡。当 Selenium 点击一个被遮挡的元素时，固定区域会窃取点击，我的控件不会被点击。

固定区域有一个class=SomeFixedPositionStyle。为了解决这个问题，我想让 Selenium 注入 Javascript 代码来遍历页面上的每种样式，并将其修改为设置 position:static，如果它是 position:fixed。我该怎么做？

我选择不修改固定元素的类属性，因为滚动页面的行为会将类属性重置为具有固定样式的原始值。

例如，看看http://www.ishares.com/us/products/239572/ishares-jp-morgan-usd-emerging-markets-bond-etf 。当您上下滚动时，您是否看到顶部和底部的条带是固定的？

当我尝试滚动到元素//*[@id="holdingsTabs"]/ul/li[3]（这是“Holdings”部分中的“All”链接时，它会在下部固定区域下方结束，无法点击。

【问题讨论】：

你能让我们重现这个问题吗？谢谢。

标签： javascript html css selenium web-scraping

【解决方案1】：

您可以在页面中注入样式规则

var sheet = document.styleSheets[0];
sheet.insertRule("SomeFixedPositionStyle { position: static!important; }", 1);

【讨论】：

看来这个解决方案需要我提前了解所有“固定”样式，对吧？有没有办法遍历每种样式并在它有“位置：固定”时对其进行修改？
嗯，唯一的其他选择是遍历所有元素并检查位置，这将是昂贵的。看来你已经知道这门课了。
我在此页面上看到了两种“固定”样式，因此理论上可以尝试您的方法。由于固定区域可能会干扰对任何其他站点上任何其他页面的任何控制，我希望能找到一个通用的解决方案来解决这个问题，这当然对开发者社区更有利。

【解决方案2】：

在这种情况下通常有帮助的是滚动到元素的视图：

driver.executeScript("arguments[0].scrollIntoView();", element);

你也可以通过动态改变包装的“位置”来摆脱“粘性”：

var wrapper = driver.findElement(webdriver.By.css('.sticky-wrapper'));
driver.executeScript("arguments[0].style.position = null;", wrapper);

【讨论】：

刚试过这个，它会导致屏幕滚动到“全部”链接出现在顶部固定区域正下方的位置。所以顶部固定区域捕获了后续的点击。当我使用 Actions.MoveToElement() 时，它会在底部固定区域下方滚动。
@sevzas 好的，知道了。增加了一个选项。尚未对其进行测试，但至少希望总体思路会有所帮助。谢谢。
固定区域的类别根据页面垂直滚动到的位置在“sticky-wrapper”和“sticky-wrapper fixed”之间交替。我发现如果一个对象是“class=fixed”，我可以使用 driver.ExecuteScript("arguments[0].style.position = 'static';", driver.FindElements(By.ClassName("fixed") )[0]) 但是我必须在每次点击之前运行这段代码。