Selenium WebDriver Javascript : Modify element CSS

Question

I'm writing automated tests with Selenium Javascript WebDriver. I'd like to know how I can modify CSS on the page.

http://code.google.com/p/selenium/wiki/WebDriverJs

So far, I'm able to get DOM elements, click them, or type text into input fields.

driver.findElement(webdriver.By.css("#myid"));
webElem.click();
webElem.sendKeys();

I'm stuck right now with a problem that one of the input field type is hidden. So when I try to do webElem.sendKeys() I get this Error:

"Element is not clickable at point"

I'd like to change the type of this input field from "hidden" to "text" so that I can call sendKeys on it. I couldn't find any documentation on how to do that.

Why? If it's hidden is it really the element you actually want to interact with? Does a particular user action cause that element to become displayed? What would a user need to do to actually populate that input field? — Arran
– Arran, Commented Aug 12, 2014 at 20:27
User would need to move a slider which would cause the value of that input field to change, I don't really know how to drag a slider with selenium besides I feel like changing input value directly is an easier option. — sublime
– sublime, Commented Aug 12, 2014 at 20:40
It isn't life like, and if these tests are supposed to be used for automatic CI regression tests, you need them to be as user & life like as possible. I would find out how you change the slider personally. What makes up the slider? Is it a standard scroll bar? A jquery plugin? — Arran
– Arran, Commented Aug 12, 2014 at 20:42
No its a yui plugin, regardless the complexity of doing that is not worth the hassle, I need to test different scenarios by providing different input values. Changing input values will do the job here. — sublime
– sublime, Commented Aug 12, 2014 at 21:09

user3179064 · Accepted Answer · 2014-08-13 07:38:04Z

1

You can execute Javascript like this:

var webdriver = require('selenium-webdriver');
var driver = new webdriver
    .Builder()
    .withCapabilities(webdriver.Capabilities.chrome())
    .build();

driver.executeScript('/* document.getElementById etc. */');

However in principle, I agree with Arran in the comments above.

answered Aug 13, 2014 at 7:38

user3179064

Sign up to request clarification or add additional context in comments.

2 Comments

sublime Over a year ago

Thank you this worked, I changed CSS property of that element by injecting javascript. But this seems like a hacky solution. Is there a way to actually change page CSS by using webdriver APIs?

user3179064 Over a year ago

You can get attributes, but not set them as far as I know.

Collectives™ on Stack Overflow

Selenium WebDriver Javascript : Modify element CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related