Issue with CSS locator select-react

Question

I have an issue with a CSS locator. I have a unique label for the parent, and from there I can get the child that I need.

@FindBy(css = \"[data-qa=\"select-S         


        

Answer 1

You don't have to try to concatenate CSS selectors.

It would be easier if you could define a parent as a WebElement:

WebElement seller = driver.findElement(By.cssSelector("[data-qa=select-Seller]"));

And then find elements inside it:

WebElement sellerDropdown = seller.findElement(By.cssSelector(".select__value-container"));

WebElement closeButton = seller.findElement(By.cssSelector("[data-qa=icon-x]"));

Note how we are using seller.findElement instead of driver.findElement for child elements.

---

I am not 100% sure how to describe this in FindBy terms, take a look if this helps:

• Selenium/PageFactory: Find child elements using parent element's @FindBy?