How to modify css by class name in selenium

Question

I am learning how to use Selenium in python and I try to modify a css style on http://www.google.com. For example, the <span class="gbts"> ....</span> on that page. I would like to modify the gbts class.

browser.execute_script("q = document.getElementById('gbts');" + "q.style.border = '1px solid red';")

Is there an API method called getElementByClass('gbts') ?

Why are you attempting to do that? This is nothing to do with Selenium, it's more of a Javascript question. — Arran
– Arran, Commented Nov 8, 2013 at 9:53
@Aran, why i can modify css by id but not by class. Is there any other methods to modify by class? — jimwan
– jimwan, Commented Nov 8, 2013 at 10:10

Arran · Accepted Answer · 2013-11-08 10:23:20Z

4

You are asking how to get an element by it's CSS class using JavaScript. Nothing to do with Selenium really.

Regardless, you have a few options. You can first grab the element using Selenium (so here, yes, Selenium is relevant):

element = driver.find_element_by_class_name("gbts")

With a reference to this element already, it's then very easy to give it a border:

driver.execute_script("arguments[0].style.border = '1px solid red';")

(Note, the arguments[0])

If you really must use JavaScript and JavaScript alone, then you are very limited. This is because there is no getElementByClassName function within JavaScript. Only getElementsByClassName which means it would return a list of elements that match a given class.

So you must specifically target what element within the list, that is returned, you want to change. If I wanted to change the very first element that had a class of gbts, I'd do:

driver.execute_script("document.getElementsByClassName('gbts')[0].style.border = '1px solid red';")

I would suggest you go for the first option, which means you have Selenium do the leg work for you.

answered Nov 8, 2013 at 10:23

Arran

25.1k6 gold badges71 silver badges78 bronze badges

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

4 Comments

otaku Over a year ago

I get this error selenium.common.exceptions.WebDriverException: Message: unknown error: Cannot read property 'style' of undefined

otaku Over a year ago

Figured it out. I had to pass another parameter to execute_script which was element

WEFX Over a year ago

This answer shows how to add specific CSS properties, but does not address the original question about adding a class.

Arran Over a year ago

@WEFX that's because the question is not how to add a class, but rather how to get it by class. As I say, nothing to do with Selenium really. The question is more JS than anything else.

Mark Salvin · Accepted Answer · 2015-01-29 05:51:09Z

1

Another pure JavaScript option which you may find gives you more flexibility is to use document.querySelector().

Not only will it automatically select the first item from the results set for you, but additionally say you have multiple elements with that class name, but you know that there is only one element with that class name within a certain parent element, you can restrict the search to within that parent element, e.g. document.querySelector("#parent-div .gbts").

See the (Mozilla documentation) for more info.

answered Jan 29, 2015 at 5:51

Mark Salvin

212 bronze badges

Collectives™ on Stack Overflow

How to modify css by class name in selenium

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related