Selenium: Clicking on React button

Question

I am trying to automate testing of my react site for school, the first page loads fine and I enter a password and hit enter to submit, on the second page there are a lot of buttons with the same class name, so the only way to differentiate them is from their text value, such as "logout", "demo test" and others, please take a look at the picture to see the layout and the HTML code, the problem I am having is to actually click through the page using selenium, when just manually clicking it works fine: I tried using:

driver.findElement(By.linkText("demo test")).click();

and

driver.findElement(By.xpath("//button[[@type, 'button'] and [text()='demo test']]")).click();

and a whole variety of find elements by class name, but they all have the same class name, take a look at the picture.

HTML:

Answer 1

To click() on the element with text as demo test you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following locator strategies:

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@class='btn' and text()='demo test']"))).click();