How to find and click on a button element that contains multiple classes

Related searches

Using python + selenium chromedriver. At a login screen and trying to click the login button however I cant seem to identify the element properly.

Code trial:

login = driver.find_element_by_css_selector('tv-button.tv-button--no-border-radius.tv-button--size_large.tv-button--primary_ghost.tv-button--loader')
click(login)

HTML:

<button type="submit" class="tv-button tv-button--no-border-radius tv-button--size_large tv-button--primary_ghost tv-button--loader">
<span class="tv-button__text">Log In</span>
<span class="tv-button__loader"><span class="tv-button__loader-item"></span><span class="tv-button__loader-item"></span><span class="tv-button__loader-item"></span></span></button>

No doubt that we should always choose css selector over xpath.

But the css selector you are using : .tv-button.tv-button--no-border-radius.tv-button--size_large.tv-button--primary_ghost.tv-button--loader looks very unstable.

For just login button, you could use :

xpath : //span[contains(text(),'Log In')]/parent::button

Reason behind that you should avoid css selector is that (in this case), that css selector is combination of class name, so in case if any class name changes, you will have to change the locator.

Probability of changing the class name in this case is highly likely. Cause it's made of 5 classes.

Hope this will helps.

jQuery multiple classes Selector, In this article, we will see how to select multiple classes using jQuery multiple Here we have selected the elements with class cl1 and cl2 on a button click event Click Me! button element has the class cl1 so on the button click event these� Definition and Usage. The .class selector can also be used to select multiple classes.. Note: Seperate each class with a comma. Note: Do not start a class attribute with a number.

It seems you miss the . at beginning, so Css selector will look for tv-button tag instead of class. Try this:

login = driver.find_element_by_css_selector('.tv-button.tv-button--no-border-radius.tv-button--size_large.tv-button--primary_ghost.tv-button--loader')
click(login)

How to select an element with multiple classes using jQuery , It contains well written, well thought and well explained computer There are two procedures to select an element with multiple classes by Using filter() Method: By using filter() method we can filter out all the elements that do if you find anything incorrect by clicking on the "Improve Article" button below. Click Element accesses the gtm.element key in the Data Layer; Unlike other built-in GTM Click Variables, Click Element returns an object (meaning that it contains a lot more data than just a regular text) Form Element and Click Element are basically the same variables. In fact, all Click variables and their Form Variable counterparts are the same.

I would attempt a shorter class selector of

driver.find_element_by_css_selector('.tv-button').click()

jQuery Multiple Classes Selector, jQuery multiple classes Selector. ❮ jQuery Selectors. Example. Select all elements with class "intro", "demo" or "end":. Use the GTM preview mode to find your click class through these 5 simple steps. Step 1: Enable Click Classes & Click Elements Variables. If you don’t already have these two variables enabled then go to your built-in variables settings and enable as shown below. Step 2: Create a New Click Trigger

Try Induce WebDriverWait to identify the element and then click on that.

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

element=WebDriverWait(driver,30).until(EC.element_to_be_clickable((By.CSS_SELECTOR,'button.tv-button span')))
print(element.text)
element.click()

How to Select an Element with Multiple Classes with jQuery, If you want to target the elements with multiple classes names, such as selecting the elements only if it has both classA and classB, or has classes classA, classB� The classList property returns the class name(s) of an element, as a DOMTokenList object. This property is useful to add, remove and toggle CSS classes on an element. The classList property is read-only, however, you can modify it by using the add() and remove() methods.

Multiple Selector (“selector1, selector2, selectorN”), This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in <p class="notMyClass">p class="notMyClass"</p >. Parameter Type Description; classname: String: Required. The class name of the elements you want to get. To search for multiple class names, separate them with spaces, like "test demo".

Given an HTML document and the task is to select the elements with different ID’s at the same time using JQuery. Approach: Select the ID’s of different element and then use each() method to apply the CSS property on all selected ID’s element. Then use css() method to set the background color to pink to all selected elements.

Element preference order.contains() defaults to preferring elements higher in the tree when they are: input[type='submit'] button; a; label; Cypress will ignore this element preference order if you pass a selector argument to .contains(). Favor of <button> over other deeper elements

Find Element command returns the web element that matches the first most element within the web page. Find Elements command returns a list of web elements that match the criteria. Find Element command throws NoSuchElementException if it does not find the element matching the criteria.

Comments
  • Will this basically monitor the button until its clickable? Could this be used with a webpage that has a submit button greyed out until some condition is met and then is clickable?
  • This is the best practise to use WebDriverWait incase your page unable to load in time it is an explicit wait to check whether element is clickable and wait for specified time.