0

I'm trying to locate an element by class name. This is an excerpt from the page source (saved to a file using BeautifulSoup):

<div class="flex flex-column"><div...

If I try to find this element like so:

element = browser.find_element_by_class_name("flex flex-column")

It raises an exception:

Message: no such element: Unable to locate element: {"method":"css selector","selector":".flex flex-column"}

But doing

element = browser.find_element_by_class_name("flex-column")

finds the element (there is only one flex-column).

Why does the error message say "selector":".flex flex-column"? Where does that period come from? And how do I know what the correct name of an element is? I'm only using the inspection tool in Firefox to find class names.

Also, how would I search for an element like this one?:

<span class="absolute w-20 h-20 rounded flex justify-center items-center transition marker-wrapper border border-gray-3 group-hover:border-primary-4 bg-gray-6">
uzumaki
  • 1,743
  • 17
  • 32
  • the "." is specifically for class... (and "#" is usually for id) When you see a space in the class attribute it means that the element has more than one css styles associated with it. This one has 2... ".flex" and ".flex-column". (css style names can't have spaces in them.) – pcalkins May 05 '21 at 19:48
  • @pcalkins So, in the second class example that I provided, I could search for any term that is separated by a space? Is there a way to search for more than one attribute? – uzumaki May 05 '21 at 19:58
  • sure, but in general locating by class is not a good idea. Many items can share the same class. If it's available, use the ID. You could use xpath and statements or something like that, but there's probably a better way to locate this without using the class attribute. Also see this thread: https://stackoverflow.com/questions/3881044/how-to-get-html-elements-with-multiple-css-classes – pcalkins May 05 '21 at 20:26

1 Answers1

3

I believe that method only takes a single class name. So it will only take flex or flex-column.

If it's absolutely necessary to use the whole class name, you can use xpath or css selectors to accomplish this.

xpath selector

driver.find_element_by_xpath("//div[@class='flex flex-column']")

css selector

driver.find_element_by_css_selector("div.flex.flex-column")
JeffC
  • 22,180
  • 5
  • 32
  • 55
pmorrowtron
  • 46
  • 3
  • 1
    It has to be "div" not "span" in this example. Then it works. – uzumaki May 05 '21 at 20:06
  • 1
    Please, please, please don't use XPath for something like this. CSS selectors are better in every way. XPath in this case is doing an exact string match for the classes. If ANYTHING changes, it will fail. Simple example, lets say the classes switch place so the HTML changes from `
    ` to `
    `. The XPath stops working but the CSS selector works just fine even though all that happened was the classes switched place. The CSS selector is also faster and better supported on all browsers.
     – JeffC May 05 '21 at 20:13