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 had the right idea with your clearDropdown() method, there's just a more efficient way to get there.

Seller would instead be defined as the parent, e.g.

@FindBy(css = "[data-qa='select-Seller']")
Webelement sellerParent; // probably needs a better name

Then you would define a method for each element you want to either get or interact with that is based off of the parent element.

public void clearDropdown(WebElement element)
{
    element.findElement(By.cssSelector("[data-qa=icon-x]")).click();
}

// probably needs a better name
public WebElement getChild(WebElement element)
{
    return element.findElement(By.cssSelector(".select__value-container"));
}

Now you just call it like

clearDropdown(sellerParent);

or

WebElement seller = getChild(sellerParent);

for any parent element you want.

Answer 2

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?