How to extract text segments from a paragraph when separated by icon image in WebDriver

You can't do this directly in Selenium, because you need to return text fragments, and the Selenium finders all return web elements.

However, there are xpath selectors you can use for this, which will return the specific text fragments you need. The basic approach is an xpath selector like this:

//p[contains(@class, 'MuiTypography-root')]/text()[position() = 1]

This will return the first fragment of text inside the <p> element - so, this (after trimming off the excess whitespace):

"MainSchedule"

How to use the above xpath selector? We will change the above "1" so it is not hard-coded; we will determine the number of possible text fragments we need to extract, and we will build a loop accordingly.

We use the xpath classes and parsers provided in Java as follows:

import java.io.IOException;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.xpath.XPath;
import javax.xml.xpath.XPathExpressionException;
import javax.xml.xpath.XPathFactory;

import org.w3c.dom.Document;
import org.xml.sax.SAXException;

...

// assuming Firefox (I guess you are using Chrome):
System.setProperty("webdriver.gecko.driver", "your/path/here/geckodriver.exe");
WebDriver driver = new FirefoxDriver();
String uri = "your URL in here";
driver.navigate().to(uri);

// Here is where we use the Java parser and xpath classes:
DocumentBuilderFactory docBuilderFactory = DocumentBuilderFactory.newInstance();
DocumentBuilder docBuilder = docBuilderFactory.newDocumentBuilder();
Document doc = docBuilder.parse(uri);
XPath xPath = XPathFactory.newInstance().newXPath();

// count how many <svg> tags there are.
String svgCounter = "count(//p[contains(@class, 'MuiTypography-root')]/svg)";
String count = xPath.compile(svgCounter).evaluate(doc);
// There can be up to this many pieces of text we need to extract:
int max = Integer.parseInt(count) + 1;

String expressionOne = "//p[contains(@class, 'MuiTypography-root')]/text()[position() = %s]";

for (int i = 1; i <= max; i++) {
    String result = xPath.compile(String.format(expressionOne, i)).evaluate(doc).trim();
    if (!result.isBlank()) {
        System.out.println(result);
    }
}

driver.quit();

The above print statements print the following:

"MainSchedule"
"Container1"
"Container1.2"

Points to note:

(1) This approach assumes that you have a well-formed HTML document which can be parsed at this step:

Document doc = docBuilder.parse(uri);

(2) The above code assumes there is one <p> element with an unspecified number of child <svg> tags. If you have multiple such <p> elements in your page, then you will need to adjust the above code accordingly, to process each <p> element one-by-one.

(3) If you don't have a well-formed HTML document, the above approach may fail. There is a hackier approach you can take, in that case - but it is not really recommended because it involves using a regular expression to split up a string of HTML - almost never a good idea. Often, this will be brittle and fail in surprising ways.

The hack goes like this:

String expressionTwo = "//p[contains(@class, 'MuiTypography-root')]";
WebElement element1 = driver.findElement(By.xpath(expressionTwo));
String html = element1.getAttribute("innerHTML").replace('\n', ' ');
String[] items = html.split("<svg .*?</svg>");
for (String item : items) {
    System.out.println(item.trim());
}

In this case, we use the innerHTML attribute to get the string we need to manipulate.