量角器 - 更改css属性以与元素交互

Question

目前在页面上我测试我有一个select是与display: none在CSS中,所以我不能与此元素进行交互.我搜查了但是我找不到任何可以帮助我的东西.

HTML

<select name="preview_district" placeholder="Departamento" data-native-select="true" data-toggle-placeholder="true">
<option value="*" disabled="" selected="" hidden="">(Selecciona)</option>
<option value="91">AMAZONAS</option>
<option value="5">ANTIOQUIA</option>
</select>

CSS

select[data-native-select="true"] {
    display: none;
}

Answer 1

我假设您正在自动化Angular页面,所以我们走了.

首先要确保您可以在元素可见时与元素进行交互,您可以在浏览器的DevTools中执行此操作,通过添加一个来使其可见display:block.然后检查如果更改选择框的值,该值也可以与Angular Binding一起使用.

如果是这样,您可以通过使用以下命令在页面中注入一段Javascript,轻松地使用Protractor使元素可见

browser.executeScript('document.querySelector(\'[name="preview_district"]\').style.display = "block"');

这导致了承诺,所以要注意这一点!

你也可以通过量角器ElementFinder,它看起来像这样(使用by.model/by.css /或其他东西)

browser.executeScript('arguments[0].style.display = "block"', element(by.css('.your-selector')).getWebElement());

希望能帮助到你