How to fetch the text from span tag?

Question

I need to fetch text 'Finance' from the span tag below to compare that with another value which is saved in a file.But I am not able to fetch that.

<span class="panel-text col-md-8">Finance</span>

Here is the full code for the above

<div class="dashboard-panel dashboard-type-employee-input">
    <div class="dashboard-panel-header">
        <i class="fa fa-edit"></i>
        <span class="dashboard-panel-title">Provided Employee Input</span>
    </div>
    <div class="dashboard-panel-content">

        <!---->
        <div class="ng-star-inserted">
            <!---->
            <!---->
            <div class="col-md-12 ng-star-inserted">
                <span class="panel-text label col-md-4">Department in which the employee works:</span>
                <span class="panel-text col-md-8">Finance</span>
            </div>
        </div>
        <div class="ng-star-inserted">
            <!---->
            <!---->
            <div class="col-md-12 ng-star-inserted">
                <span class="panel-text label col-md-4">Employee's Date of Birth:</span>
                <span class="panel-text col-md-8">03-08-1990</span>
            </div>
        </div>
        <div class="ng-star-inserted">
            <!---->
            <!---->
            <div class="col-md-12 ng-star-inserted">
                <span class="panel-text label col-md-4">County in which the employee works:</span>
                <span class="panel-text col-md-8">Iowa</span>
            </div>
        </div>
        <div class="ng-star-inserted">
            <!---->
            <!---->
            <div class="col-md-12 ng-star-inserted">
                <span class="panel-text label col-md-4">Employee's home address:</span>
                <span class="panel-text col-md-8">Station Street</span>
            </div>
        </div>
        <div class="ng-star-inserted">
            <!---->
            <!---->
            <div class="col-md-12 ng-star-inserted">
                <span class="panel-text label col-md-4">Employee ID:</span>
                <span class="panel-text col-md-8">M1669</span>
            </div>
        </div>
        <div class="ng-star-inserted">
            <!---->
            <!---->
            <div class="col-md-12 ng-star-inserted">
                <span class="panel-text label col-md-4">Authorization Code:</span>
                <span class="panel-text col-md-8">45637</span>
            </div>
        </div>

    </div>
</div>

The xpath selector for the above code is given below

element(by.xpath('//*[@id="employer-call"]/div[2]/div[2]/efx-tabs/div/efx-tab[4]/div/div/employee-input-panel/efx-dashboard-panel/div/div[2]/div[1]/div/span[2]'));

How can I get the text from the tag.I tried by adding text() to the path and also using getText() and InnerHtml

Answer 1

Assuming that the text "Department" is only used once inside the element with id of "employer-call" I would do this:

• get the employer-call element: employer = element(by.id("employer-call"));
• get the element within the employer-call element that contains the text "Department": sibling = employer.FindElement(by.xpath()) and use span[contains(text(), "Department"]
• from that element, depending on the language you are using and the methods you have available you can either get the next sibling node, or get the parent div then the second span in the div. If you can get the next sibling, that's easier, but if not, getting the parent then the other child and retrieving its text will give you the value you want to check.

Answer 2

You may use first-child to get first div element or :nth-child(1).

   WebElement myElement1 = driver.findElement(By.cssSelector(".dashboard-panel-content div:first-child .col-md-8"));
   System.out.println(myElement1.getText()); //Should print out "Finance"

to get second element div:nth-child(2)

   WebElement myElement2 = driver.findElement(By.cssSelector(".dashboard-panel-content div:nth-child(2) .col-md-8"));
   System.out.println(myElement2.getText()); //Should print out "03-08-1990"

Answer 3

I got a solution by refering to https://stackoverflow.com/questions/29478905/protractor-element-gettext-returns-an-object-and-not-string

I used

expect(this.deptData.getText()).to.eventually.equal(employee.department);

to fetch the data from span tag and compare that with the data in employee.department

Answer 4

The html code you have provided is not completely relevant to your xpath. Assuming there is really the element with id="employer-call" try the following:

//*[@id="employer-call"]//div[@class="dashboard-panel-content"]/div[1]/div/span[2]