Get Text of Success alert message in Ant Design and verify it using Selenium

Question

In one of my Projects, I have to verify the success alert text using Selenium. The UI is coded in react JS following Ant design. For verification please follow this link 'https://ant.design/components/message/' and click on Display Normal message. The message is shown above at the top of the page but I am not able to get the text from that using Selenium Webdriver coding in Core Java. Please help.

I tried this code:

driver.findElement(By.cssSelector(".ant-btn-primary")).click();
            WebDriverWait wait = new WebDriverWait(driver, 60);
            WebElement successmessage = wait.until(ExpectedConditions.visibilityOfElementLocated(By.className("ant-message-custom-content-ant-message-success")));
            successmessage.getText();

The easiest way to do this is by having a hidden div and changing the div value to true on success. This can be obtained with selenium. — Prasanth Ganesan, Jun 24 '19 at 05:40
Have an input like this ``. When the success message is displayed, do `$("#success").val('true');`. Now obtain the value present in the input tag using selenium. — Prasanth Ganesan, Jun 24 '19 at 06:21
I am coding Selenium in Java. Which HTML are you talking about ? The source code comes from developers and we can't do changes in that. We just inspect the elements. Sorry. I am not getting. — Pratik Pathare, Jun 24 '19 at 07:36
I suspect your class name may be wrong. please check your class name ant-message-custom-content-ant-message-success — Murthi, Jun 24 '19 at 09:26

score 1 · Accepted Answer · answered Jun 24 '19 at 09:33

To extract the text This is a normal message you need to induce WebDriverWait for the visibilityOfElementLocated() and you can use either of the following Locator Strategies:

cssSelector:

driver.get("https://ant.design/components/message/");
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("button.ant-btn.ant-btn-primary"))).click();
System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.ant-message"))).getText());

xpath:

driver.get("https://ant.design/components/message/");
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@class='ant-btn ant-btn-primary']"))).click();
System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[@class='ant-message']"))).getText());

Console Output:
```
This is a normal message
```

frianH · Answer 2 · 2019-06-24T10:02:10.333

0

driver.findElement(By.cssSelector(".ant-btn-primary")).click();
WebElement alertElmt = driver.findElement(By.xpath("//*[@class='ant-message']"));

for(int i=1; i<10; i++) {
    Thread.sleep(500);
    String getText = alertElmt.getText();
    if(!getText.equals("")) {
        System.out.println(getText);
        break;
    }
}

//or with webdriverwait
driver.findElement(By.cssSelector(".ant-btn-primary")).click();
WebElement alert = new WebDriverWait(driver,20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[@class='ant-message']")));
System.out.println(alert.getText());

edited Jun 24 '19 at 10:02

answered Jun 24 '19 at 07:31

frianH

7,295
6
20
45

Not working. Getting Unable to locate element exception.org.openqa.selenium.NoSuchElementException: Unable to locate element: /div/div/div/span – Pratik Pathare Jun 24 '19 at 08:16
I've tried it to run on `https://ant.design/components/message/` and fine work, i'm getting print text `This is a normal message`. I don't understand where the locator `/div/div/div/span` came from the error you got – frianH Jun 24 '19 at 08:24
Can you tell me how you got this xpath '//*[@class='ant-message']' ? – Pratik Pathare Jun 24 '19 at 08:56
The xpath appears after clicking the `Display Normal message` button. Before you click it, the xpath is not yet available – frianH Jun 24 '19 at 09:11
Or your web post that you want to find the locator – frianH Jun 24 '19 at 09:14
I didn't get the logic of that for loop you applied. Can you please explain ? – Pratik Pathare Jun 24 '19 at 09:44
I do a loop to make sure that the alert already has text, each loop is given a half-minute wait, if the alert already has text then the code will exit the loop, that's just a little custom from me. Or if you want a simpler one, please see my revised answer using `WebDriverWait` – frianH Jun 24 '19 at 10:07

score 0 · Answer 3 · answered Jun 24 '19 at 09:33

I'm going to suggest:

driver.findElement(By.cssSelector(".ant-btn-primary")).click();
WebDriverWait wait = new WebDriverWait(driver, 15, 100);
String successMessage = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector(".ant-message-info > span"))).getText();

The main problem that you have is that the message doesn't last for very long, so you need to get the data out of it quickly before it is destroyed. As a result I have inlined the getText() call so that it's called as soon as the element is found.

I suspect part of your problem is getting an accurate locator. You can make it easier by opening up the chrome dev console, selecting the parent element where the notice message is created and then right clicking on that element and selecting break on -> subtree modifications. This will allow you to look at the intermediate state of the DOM by pausing JavaScript execution one the message is created. This makes it a lot easier to work out what is going on and find relevant locators.

Get Text of Success alert message in Ant Design and verify it using Selenium

3 Answers3