Selenium is unable to find element with data-testid attribute

Question

Trying to find the below element tried the following nothing works can anyone help.

<button data-testid="addToClientBasket" 
        class="sc-kfGgVZ kcCRfu">
    <span><i class="icon-Expand_Cross_30_by_30"></i>Add To Basket</span>
</button>

By.xpath("//button[@data-testid='addToClientBasket'");

By.xpath("//div[@id='root']/div/div/div/div[4]/div/div/div[2]/button/span";

By.cssSelector("button.sc-kfGgVZ.kcCRfu.added");

By.cssSelector("button.sc-kfGgVZ.kcCR");

By.cssSelector("button[class='sc-kfGgVZ kcCRfu']");

Answer 1

To identify the element with text as Add To Basket using Selenium you can use either of the following Locator Strategies:

• cssSelector:

  driver.findElement(By.cssSelector("button[data-testid='addToClientBasket']>span>i.icon-Expand_Cross_30_by_30"));
  

• xpath:

  driver.findElement(By.xpath("//button[@data-testid='addToClientBasket']/span[contains(., 'Add To Basket')]"));
  

---

Presumably, moving ahead you will be invoking click()on the element and in that case ideally you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following Locator Strategies:

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("button[data-testid='addToClientBasket']>span>i.icon-Expand_Cross_30_by_30"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@data-testid='addToClientBasket']/span[contains(., 'Add To Basket')]"))).click();
  

• Note : You have to add the following imports :

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

Answer 2

Try with the below locators

button.sc-kfGgVZ.kcCRfu
button[data-testid="addToClientBasket"]

//button[@class='sc-kfGgVZ kcCRfu']
//button[@data-testid="addToClientBasket"]

And the reasons why the locators did not worked in your case

By.xpath("//button[@data-testid='addToClientBasket'");

No closing bracket after attribute value

By.xpath("//div[@id='root']/div/div/div/div[4]/div/div/div[2]/button/span";

Not sure if your element path is correct

By.cssSelector("button.sc-kfGgVZ.kcCRfu.added");

There is no button with added classname

By.cssSelector("button.sc-kfGgVZ.kcCR");

There is no button with the specified classes combination

By.cssSelector("button[class='sc-kfGgVZ kcCRfu']");

those are 2 classes so you have to replace the white-space with .