check if text is bold

Question

I am testing the output of a search and I want to be sure that I will get the text and that it would be bold. For example I want the name to include "ar". As an output I will get:

But I want to be sure that I will have "ar" in name, but will ignore it in position, department, etc. The source of the fragment is:

<td style="width: 80%;">
                            <ul style="font-size: 20px;width: 50%;">
                                <li><b>Cecil Bonaparte</b></li>
                                <li style="font-size: 12px;">Software Engineer</li>
                                <li style="font-size: 12px;">Development</li>
                                        <li style="font-size: 12px;">HQ - CA</li>
                                <li style="font-size: 12px;">
                                    [email protected]                                </li>
                            </ul>
                        </td>

Is there an option to check if an element has the text and this text is bold? My current code is:

$("[class=odd]").shouldHave(text("char"));

My playground could be found at https://opensource-demo.orangehrmlive.com/index.php/auth/login , Directory tab

Answer 1

My solution for this is below. It is a little difficult to check the styling applied to text but we are fortunate here as the innerHtml() method will expose the inline styling. I should point out that using innerHtml() is not recommended, but I currently do not know a decent alternative.

@Test
public void whatever() {
    // Open site and enter credentials
    open("https://opensource-demo.orangehrmlive.com/");
    $("#txtUsername").val("Admin");
    $("#txtPassword").val("admin123");
    $("#btnLogin").click();
    $("#menu_directory_viewDirectory").click();

    var searchTerm = "ar";

    $("#searchDirectory_emp_name_empName").val(searchTerm);
    
    // This click is required to cause the dropdown to lose focus
    $("#search_form").click();        
    $("#searchBtn").click();
    
    // Get the first entry from each row in the results table
    ElementsCollection resultTable = $$("#resultTable tr li:first-child");

    for (SelenideElement searchResult : resultTable) {
        // Confirm each result has the expected search term
        searchResult.shouldHave(Condition.text(searchTerm));

        // Confirm each result has bold applied to the text
        assertThat(searchResult.innerHtml().substring(0, 3)).isEqualTo("<b>");
    }
}