QAtoday
QAtoday

Reputation: 21

Selenium is unable to find element with data-testid attribute

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']");

Upvotes: 0

Views: 7310

Answers (2)

undetected Selenium
undetected Selenium

Reputation: 193208

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
    

Upvotes: 2

supputuri
supputuri

Reputation: 14135

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 .

Upvotes: 1

Related Questions