How to extract the value of the item Interest over term using Selenium and Python

Question

I need to reach this element in selenium I think it is angular so chropath plugin is not showing any data to reach here. and extract value 14,213.47 its inside iframe

 <div class="elem">
                            <span class="text">Interest over term</span>
                            <span class="value">$14,213.47</span>
                        </div>

how can I write xpath or cssselector for it to reach this element

<div class="calculator-output">
    <div class="head">
        <div class="img-Mortgage"></div>
        <!---->
        <!----><span class="ng-tns-c0-0 ng-star-inserted">Mortgage Payment:</span>
        <!---->
    </div>

    <!----><div class="ng-tns-c0-0 ng-star-inserted">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                <div class="output">

                    
                    <!---->
                    
                    
                    <!---->
                    
                    
                    <!---->
                    
                    
                    <!----><div class="ng-tns-c0-0 ng-star-inserted">
                        <!----><div class="elem ng-tns-c0-0 ng-star-inserted">
                            <span class="text">Mortgage Payment</span>
                            <span class="value">$1,867.73</span>
                        </div>
                        <!---->
                        
                        <div class="elem">
                            <span class="text">Interest over term</span>
                            <span class="value">$14,213.47</span>
                        </div>
                        <div class="elem">
                            <span class="text">Balance owing at term</span>
                            <span class="value">$341,800.71</span>
                        </div>
                        <div class="elem">
                            <span class="text">
                                Total interest
                                <span class="info-tooltip" data-balloon="Total interest cost over amortization."></span>
                            </span>
                            <span class="value">$210,318.94</span>
                        </div>

                        <!---->
                    </div>
                    
                </div>
                <div class="actions">
                    <!---->
                    <!---->
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="options">
                    <div class="elem">
                        <div class="imgPlan"></div>
                        <span class="ng-tns-c0-0">Full Plan</span>
                    </div>
                    <!----><div class="elem ng-tns-c0-0 ng-star-inserted">
                        <div class="imgPrint"></div>
                        <span class="ng-tns-c0-0">Print</span>
                    </div>
                    <div class="elem">
                        <div class="imgSave"></div>
                        <span class="ng-tns-c0-0">Save</span>
                    </div>
                    <!----><div class="elem ng-tns-c0-0 ng-star-inserted">
                        <div class="imgCompare"></div>
                        <span class="ng-tns-c0-0">Compare</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 1 · answered Jul 15 '20 at 20:04

0

To select the <div>, use this XPath-1.0 expression:

//div[@class="elem" and span[@class="text"]="Interest over term"]

and to get the value 14,213.47, use this one:

substring-after(//div[@class="elem" and span[@class="text"]="Interest over term"]/span[2],"$")

answered Jul 15 '20 at 20:04

zx485

28,498
28
50
59

When I open this page, I cannot even find the term `Interest over term`, so it's no wonder the expression doesn't work. The error must be somewhere else. – zx485 Jul 15 '20 at 20:32
I guess that @DebanjanB's answer will be better than mine, because I do not know about extracting data from IFRAMEs. Maybe my XPath'es are of some use for you, though. – zx485 Jul 15 '20 at 20:57

score 0 · Answer 2 · answered Jul 15 '20 at 20:11

0

Try either

(//div[@class="elem"]/span["interest over term"])[1]/following-sibling::span[@class="value"]

or

(//div[@class="elem"]/span["interest over term"])[1]/following-sibling::span[@class="value"]/text()

and see if it works.

answered Jul 15 '20 at 20:11

Jack Fleeting

24,385
6
23
45

score 0 · Accepted Answer · answered Jul 15 '20 at 20:46

The text Interest over term and the associated value $14,213.47 are within an <iframe> so you have to:

Induce WebDriverWait for the desired frame to be available and switch to it.
Induce WebDriverWait for the desired element to be clickable.

You can use the following xpath based Locator Strategies:

driver.get("https://www.coastcapitalsavings.com/calculators/mortgage-calculator")
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='cookies-disclaimer--button']"))).click()
WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@src='https://calculator.coastcapitalsavings.com/ITSCredit.External/CCS/ITSCredit.CCS.UI.External/calculator/MT?']")))
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[text()='Payment']"))).click()
driver.execute_script("arguments[0].scrollIntoView(true);", WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//span[text()='Interest over term']"))))
# using xpath and text attribute
print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//span[text()='Interest over term']//following-sibling::span"))).text)
# using cssSelector and get_attribute()
print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//span[text()='Interest over term']//following-sibling::span"))).get_attribute("innerHTML"))

Console Output:
```
$4,819.69
$4,819.69
```

Note : You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

Reference

You can find a couple of relevant discussions in:

How to extract the value of the item Interest over term using Selenium and Python

3 Answers3

Reference