Selenium css selector visible

CSS selectors for Selenium with example

When we don’t have an option to choose Id or Name, we should prefer using CSS locators as the best alternative.
CSS is «Cascading Style Sheets» and it is defined to display HTML in structured and colorful styles are applied to webpage.

Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Visit to know more W3.Org Css selectors

• CSS has more Advantage than Xpath
• CSS is much more faster and simpler than the Xpath.
• In IE Xpath works very slow, where as Css works faster when compared to Xpath.

tagName[attributename=attributeValue] Example 1: input[id=email] Example 2: input[name=email][type=text]

In CSS there are two special characters which has important role to play.

1. dot(.) refers to class.
Syntax:

For example if the below is the html for a sign button

In the above html there are multiple classes used for the single button. How to work in such a situation.
Below are the examples to work with classes. If you observe, we have combined multiple classes to work. As the class is not unique like ID, we may require to join two classes and find the accurate element.

The CSS class selector matches elements based on the contents of their class attribute. In the below example primary-btn is class attribute value.

Example 1: css=.primary-btn Example 2: css=.btn.primary-btn Example 3: css=.submit.primary-btn

The above can be written like below in selenium

WebElement ele1 = driver.findElement(By.cssSelector(".primary-btn")); WebElement ele2 = driver.findElement(By.cssSelector(".btn.primary-btn")); WebElement ele3 = driver.findElement(By.cssSelector(".submit.primary-btn"));

Hash(#) refers to Id

The above one can be re-written as

CSS locator Examples using ID and Class attributes

/* below syntax will find «input» tag node which contains «id=email» attribute */

In selenium we can write it as

You can make use of Selenium IDE to verify if the identifier is working fine or not. If the element has identified, it will highlight the field and html code in Yellow color.

Below syntax will find «input» tag which contains «id=email» and «type=text» attribute. Again here we have added multiple attributes which the input tag has. For username, we will have the text type as ‘text’ and for password the text type will be ‘password’.

css=input[name=email][type=text]

Below is the syntax for using input Tag and class attribute: It will find input tag which contains «submitButton» class attribute.

css=input.rc-button.rc-button-submit

Please find the below screen shot with example:

Using CSS locators, we can also locate elements with sub-strings. Which are really help full when there are dynamically generated ids in webpage

There are there important special characters in css selectors:
1. ‘^’ symbol, represents the starting text in a string.
2. ‘$’ symbol represents the ending text in a string.
3. ‘*’ symbol represents contains text in a string.

CSS Locators for Sub-string matches(Start, end and containing text) in selenium
/*It will find input tag which contains ‘id’ attribute starting with ’ema’ text. Email starts with ’ema’ */

If you remove the symbol an try to find the element with same sub-string, it will display error as «locator not found». We can observe the error in the below screen shot. one with error and the other with success

/*It will find input tag which contains ‘id’ attribute ending with ‘ail’ text. Email ends with ‘mail’ */

/* It will find input tag which contains ‘id’ attribute containing ‘mai’ text. Email contains ‘mai’ */

CSS Element locator using child Selectors

/* First it will find Form tag following remaining path to locate child node.*/

css=form>label>input[id=PersistentCookie] 

CSS Element locator using adjacent selectors
/* It will try to locate «input» tag where another «input» tag is present on page. the below example will select third input adjacent tag.

CSS selector to select first element

We can do this in two ways : —

First using first-of-type — which represents the first element among siblings of its element type and :nth-of-type() matches elements of a given type, based on their position among a group of siblings.

Let us see an example on this using html.

 
blah 
first
 
second
 
third
 
fourth
 

To select the first element with class ‘red’, css selector should be .red:first-of-type and using nth-of-type, css should be .red:nth-of-type(1)

CSS selector to select last element

Using :last-of-type selector, we can target the last occurrence of an element within its container. let us look at the below example with html :-

 
 
hello test example1
 
hello test example2
 
hello test example3
 

In the above example, if we want to select ‘ hello test example3’, css selector should be .test:last-of-type .

Источник

How to Use CSS Selector in Selenium WebDriver | 13 Examples

Selenium Webdriver is very powerful to automate web applications. We can identify web elements in Selenium Webdriver using various locators and CSS Selector is one of them.CSS Selector in Selenium acts as the best workaround to find an element when we don’t have an option to locate an element using Id or Name. Also, it is faster and simpler than XPath.To know more about XPath please refer exclusive article on Xpath XPath in Selenium WebDriver with Example .In the following examples, we will see how to use CSS Selectors in Selenium.

CSS Selectors by Attribute

Suppose we have an Html tag with the following attributes.

The syntax to locate elements by attribute are as follows

tagName[attributename=’attributeValue’]

Since name might not be a unique property on the web we can combine more than one attribute to find an element uniquely. For that, the syntax is as follows:

CSS Selector Tag and ID Attribute

In CSS, a hash (#) notation refers to the id attribute of an element.

Syntax 1:
Syntax 2:

CSS Selector Class Attribute

A dot (.) notation is used to refer to the class attribute of an element.

Handling Multiple Classes or Space Character in Class Name

Suppose we have an Html tag with the following attributes.

In the above HTML tag, three classes (abc, pqr, and xyz) are being used for the single text. box. You can not write a statement like By.cssSelector(“.abc pqr xyz”) to identify an element.If you write such code Selenium will throw NoSuchElementException error. Developers can use such class having multiple class names for different elements on the page. Out of all the class names, a few of the names might be unique. To handle such a scenario we have to join the classes using a dot(.) notation unless the required element is identified uniquely. The following are the possible ways to refer to the element.

Locate Elements with Sub-strings or Partial Match

Using CSS locators, we can also locate elements with some matching patterns or sub-strings. It becomes very helpful to identify elements with dynamically generated ids. This is achieved by using three special characters ^, $, and *.

‘^’ symbol, represents the starting text in a string.
‘$’ symbol represents the ending text in a string.
‘*’ symbol represents contains text in a string.

Let’s consider a web page has the following HTML Tags

Источник

Selenium CSS selector :visible is not a valid selector

Maybe you can use: After check element: Solution 3: You should try using to wait until element is visible and enable to click with before interacting as below :- Just locate the element normally, e.g. both of your elements have an ID so use , like and Selenium will take care of the rest.

Selenium CSS selector :visible is not a valid selector

@FindBy(css = "a[data-code=panel]") private List cpaneladmin; 

Then iterate through the elements until you find the one that is displayed.

public WebElement FindDisplayed(WebElements elements) < foreach (WebElement element in elements) < if (element.isDisplayed()) // correct method: isDisplayed() return element; >> 

This should answer your question.

If you want to verify the element is visible another way, use element.IsDisplayed(), or use ExpectedConditions.

This might solve your problem,

List list = driver.findElements(By.cssSelector("selector_that_matches_one__or_more_elements")); //do what ever you want with the elements in list 

The above code will store all the visible elements that can be located by the provided selector.
Try using an implicit wait at the start of your code, for the above statements to be more effective.

driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); 

When implicitly waiting, findElements() method will return as soon as there are more than 0 items in the found collection, or will return an empty list if the timeout(30 secs in the above case) is reached.

Python — illegalselector was specified or could not find, Trying to build a small bot to help with trading but for some reason the code gets an array of slightly different errors when trying to search for a instrument. keyboard = Controller() self.driver =

C# Selenium CSS-selector attribute not working

You don’t need to (and shouldn’t) include style=display. in your locator to determine visibility. Selenium does that for you when you use .Displayed or use ExpectedConditions and wait for visible. Just locate the element normally, e.g. both of your elements have an ID so use By.Id(«page_progress») , like

wait.Until(ExpectedConditions.ElementIsVisible(By.Id("page_progress")); 

and Selenium will take care of the rest.

The wrong comparison operator is being used in the CSS selector.

The ~= operator must exactly match the value of the attribute.

Either add the block part of the attribute value, or change the comparison operator to ^= .

By.CssSelector("#page_progress[style^='display:']") 

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Automated tests — Invalid Element in selenium, The css selector used here uses class no-controls.ng-pristine.ng-untouched.md-input.ng-empty.ng-valid-email.ng-invalid.ng-invalid-required which is not a good practice as the class can change according to the operation you perform on the input box like click, enter values etc. Use id #input_0 as the css …

How to fix «Element is Currently not Visible» Selenium <a> Element

Your CSS Selector was off a bit. Notice the «.» between the two classes. Also, you can target the a specifically. Try this:

var checkoutButton = driver.FindElement(By.CssSelector("div.cart__checkout.cart__checkout--small a")); 

ILocatable hoverItem = (ILocatable)driver.FindElement(By.XPath("//*[@id='js-minicart']")); IMouse mouse = ((IHasInputDevices)driver).Mouse; mouse.MouseMove(hoverItem.Coordinates); 

driver.FindElement(By.Xpath('//*[@id="js-minicart"]/li/div[2]/div[3]/div[4]/ul/li/a/span')); 

You should try using WebDriverWait to wait until element is visible and enable to click with ExpectedConditions.ElementToBeClickable before interacting as below :-

var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10)); IWebElement checkOut = wait.Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("a.button--checkout[title ='Checkout']"))); checkOut.Click(); 

Not(:empty) CSS selector is not working?, It seems to work fine with any combination of the other selectors: input:not (:empty):not (:focus):invalid < border-color: #A22; box-shadow: none >If I remove the :not (:empty) part, it works just fine. Even if I change the selector to input:not (:empty) it still won’t select input fields which have text typed into them.

Источник