[Python] How to get value present inside a title of a span tag

There is a report and I want to Extract a Value from it
The Value is being generated by a Component written in JavaScript Here is particular section code being highlighted when I do Inspect element for the below image section

Value to be Fetch

Below is the code for it and XPath

<span title="£19,649,981.19" class="right-Align">£19,650.0k</span>


XPATH: //*[@id="HEADER_HEADER_3_ADVANCE_HEADER_0LOAN_OUTSTANDING"]/span
Full XPATH: /html/body/div[3]/div[3]/div[1]/headers/div/header[1]/div/div/div[1]/div[1]/h1/span/span


So I am able to access the URL which I have confirmed by printing the Title of the page
But when trying to fetch value it returns empty list

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.edge.service import Service as EdgeService
from webdriver_manager.microsoft import EdgeChromiumDriverManager

# Setup Edge WebDriver
edge_service = EdgeService(EdgeChromiumDriverManager().install())
driver = webdriver.Edge(service=edge_service)

try:
WebDriverWait(driver, 30).until(EC.url_contains("dashboard"))
desired_url = "Example.com"
driver.get(desired_url)

time.sleep(10)

print("Title of the Webpage is =", driver.title)

span_elements = driver.find_elements(By.XPATH, '/html/body/div[3]/div[3]/div[1]/headers/div/header[1]/div/div/div[1]/div[1]/h1/span/span')
print(span_elements)

span_elements1 = driver.find_elements(By.XPATH, '//*[@id="HEADER_HEADER_3_ADVANCE_HEADER_0LOAN_OUTSTANDING"]/span')
print(span_elements1)

finally:
# Close the browser
driver.quit()


Output:

Title of the Webpage is =Overview Data
[]
[]


But I need to get Value £19,649,981.19

Full header code is presented below You can fine the span tag also in the code from where we need data

<span title="£19,649,981.19" class="right-Align">£19,650.0k</span>


<headers class="wid-100 fl borderHide" config="'DEAL_SUMMARY_HEADER3'"><!----><!----><div class="flex wid-100 fl mt10" ng-if="vm.config.viewType != 'vertical'" ng-repeat="headers in vm.config.headers | chunkBy : ( vm.config.chunkSize || 5 ) track by $index" index="$index"> <!----><header class="wid-100 fl flex-1 border bg-color-white ml10 first-child-ml0" ng-class="::header.headersClass" ng-style="{'flex-basis': (1/headers.length | formatter : vm.defaultFormat), 'max-width': (1/headers.length | formatter : vm.defaultFormat)};" config="header" index="$index" ng-repeat="header in headers track by $index" style="flex-basis: 25%; max-width: 25%;"><style>.highcharts-graph{stroke-width:1px}</style><style class="darkreader darkreader--sync" media="screen"></style> <!----> <!----><div class="bg-color-white wid-100 fl" ng-if="vm.config.type === 'ADVANCE'"> <label class="wid-100 fl ptb7 plr10 bd-bottom ellipsis"> <!----> <span class="label" ng-bind-html="vm.config.name" id="HEADER_HEADER_3_ADVANCE_LABEL_0LOAN_OUTSTANDING" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_LABEL_' + vm.index + vm.config.key ])">Loan Outstanding</span> </label> <div class="plr10 pt10 pb5 wid-100 fl"> <div class="wid-100 fl flex"> <div class="flex-2"> <!----><h1 ng-if="!vm.config.drillDownConfig" class="ellipsis fl" style="max-width:calc(100% - 20px)"> <!----> <span ng-bind-html="vm.headerData" id="HEADER_HEADER_3_ADVANCE_HEADER_0LOAN_OUTSTANDING" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_HEADER_' + vm.index + vm.config.key ])"><span title="£19,649,981.19" class="rightAlign">£19,650.0k</span></span> </h1><!----> <!----> <span class=" ml5 mid-font" style="line-height:30px"></span> </div> <!----><div class="flex-1 fr pl10 rightAlign mt10 ellipsis" ng-if="vm.config.subHeader"> <!----> <span ng-bind-html="vm.subHeaderData" id="HEADER_HEADER_3_ADVANCE_SUB_HEADER_0LOAN_OUTSTANDING" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_SUB_HEADER_' + vm.index + vm.config.key ])"><span title="£11,260,000" class="rightAlign">£11,260.0k</span></span> </div><!----> </div> <!----><div class="wid-100 fl rightAlign color-light small-font" ng-if="vm.config.subHeader"> <!----> <span ng-bind-html="vm.config.subHeader.name" id="HEADER_HEADER_3_ADVANCE_SUBHEADER_NAME_0LOAN_OUTSTANDING" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_SUBHEADER_NAME_' + vm.index + vm.config.key ])">Original Notional</span> </div><!----> <!----> </div> </div><!----> </header><!----><header class="wid-100 fl flex-1 border bg-color-white ml10 first-child-ml0" ng-class="::header.headersClass" ng-style="{'flex-basis': (1/headers.length | formatter : vm.defaultFormat), 'max-width': (1/headers.length | formatter : vm.defaultFormat)};" config="header" index="$index" ng-repeat="header in headers track by $index" style="flex-basis: 25%; max-width: 25%;"><style>.highcharts-graph{stroke-width:1px}</style><style class="darkreader darkreader--sync" media="screen"></style> <!----> <!----><div class="bg-color-white wid-100 fl" ng-if="vm.config.type === 'ADVANCE'"> <label class="wid-100 fl ptb7 plr10 bd-bottom ellipsis"> <!----> <span class="label" ng-bind-html="vm.config.name" id="HEADER_HEADER_3_ADVANCE_LABEL_1NUMBER_PROP" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_LABEL_' + vm.index + vm.config.key ])"># Properties</span> </label> <div class="plr10 pt10 pb5 wid-100 fl"> <div class="wid-100 fl flex"> <div class="flex-2"> <!----><h1 ng-if="!vm.config.drillDownConfig" class="ellipsis fl" style="max-width:calc(100% - 20px)"> <!----> <span ng-bind-html="vm.headerData" id="HEADER_HEADER_3_ADVANCE_HEADER_1NUMBER_PROP" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_HEADER_' + vm.index + vm.config.key ])"><span title="1" class="rightAlign">1</span></span> </h1><!----> <!----> <span class=" ml5 mid-font" style="line-height:30px"></span> </div> <!----><div class="flex-1 fr pl10 rightAlign mt10 ellipsis" ng-if="vm.config.subHeader"> <!----> <span ng-bind-html="vm.subHeaderData" id="HEADER_HEADER_3_ADVANCE_SUB_HEADER_1NUMBER_PROP" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_SUB_HEADER_' + vm.index + vm.config.key ])"><span title="30,316" class="rightAlign">30,316 sq ft</span></span> </div><!----> </div> <!----><div class="wid-100 fl rightAlign color-light small-font" ng-if="vm.config.subHeader"> <!----> <span ng-bind-html="vm.config.subHeader.name" id="HEADER_HEADER_3_ADVANCE_SUBHEADER_NAME_1NUMBER_PROP" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_SUBHEADER_NAME_' + vm.index + vm.config.key ])">Area</span> </div><!----> <!----> </div> </div><!----> </header><!----><header class="wid-100 fl flex-1 border bg-color-white ml10 first-child-ml0" ng-class="::header.headersClass" ng-style="{'flex-basis': (1/headers.length | formatter : vm.defaultFormat), 'max-width': (1/headers.length | formatter : vm.defaultFormat)};" config="header" index="$index" ng-repeat="header in headers track by $index" style="flex-basis: 25%; max-width: 25%;"><style>.highcharts-graph{stroke-width:1px}</style><style class="darkreader darkreader--sync" media="screen"></style> <!----> <!----><div class="bg-color-white wid-100 fl" ng-if="vm.config.type === 'ADVANCE'"> <label class="wid-100 fl ptb7 plr10 bd-bottom ellipsis"> <!----> <span class="label" ng-bind-html="vm.config.name" id="HEADER_HEADER_3_ADVANCE_LABEL_2TERM" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_LABEL_' + vm.index + vm.config.key ])">Term</span> </label> <div class="plr10 pt10 pb5 wid-100 fl"> <div class="wid-100 fl flex"> <div class="flex-2"> <!----><h1 ng-if="!vm.config.drillDownConfig" class="ellipsis fl" style="max-width:calc(100% - 20px)"> <!----> <span ng-bind-html="vm.headerData" id="HEADER_HEADER_3_ADVANCE_HEADER_2TERM" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_HEADER_' + vm.index + vm.config.key ])"><span title="0.249" class="rightAlign">0.2yrs.</span></span> </h1><!----> <!----> <span class=" ml5 mid-font" style="line-height:30px"></span> </div> <!----><div class="flex-1 fr pl10 rightAlign mt10 ellipsis" ng-if="vm.config.subHeader"> <!----> <span ng-bind-html="vm.subHeaderData" id="HEADER_HEADER_3_ADVANCE_SUB_HEADER_2TERM" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_SUB_HEADER_' + vm.index + vm.config.key ])"><span title="3" class="rightAlign">3.0yrs.</span></span> </div><!----> </div> <!----><div class="wid-100 fl rightAlign color-light small-font" ng-if="vm.config.subHeader"> <!----> <span ng-bind-html="vm.config.subHeader.name" id="HEADER_HEADER_3_ADVANCE_SUBHEADER_NAME_2TERM" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_SUBHEADER_NAME_' + vm.index + vm.config.key ])">vs. Original Term</span> </div><!----> <!----> </div> </div><!----> </header><!----><header class="wid-100 fl flex-1 border bg-color-white ml10 first-child-ml0" ng-class="::header.headersClass" ng-style="{'flex-basis': (1/headers.length | formatter : vm.defaultFormat), 'max-width': (1/headers.length | formatter : vm.defaultFormat)};" config="header" index="$index" ng-repeat="header in headers track by $index" style="flex-basis: 25%; max-width: 25%;"><style>.highcharts-graph{stroke-width:1px}</style><style class="darkreader darkreader--sync" media="screen"></style> <!----> <!----><div class="bg-color-white wid-100 fl" ng-if="vm.config.type === 'ADVANCE'"> <label class="wid-100 fl ptb7 plr10 bd-bottom ellipsis"> <!----> <span class="label" ng-bind-html="vm.config.name" id="HEADER_HEADER_3_ADVANCE_LABEL_3TEST_STATUS" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_LABEL_' + vm.index + vm.config.key ])">Test Status</span> </label> <div class="plr10 pt10 pb5 wid-100 fl"> <div class="wid-100 fl flex"> <div class="flex-2"> <!----><h1 ng-if="!vm.config.drillDownConfig" class="ellipsis fl" style="max-width:calc(100% - 20px)"> <!----> <span ng-bind-html="vm.headerData" id="HEADER_HEADER_3_ADVANCE_HEADER_3TEST_STATUS" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_HEADER_' + vm.index + vm.config.key ])"><span class="leftAlign" title="Pass">Pass</span></span> </h1><!----> <!----> <span class=" ml5 mid-font" style="line-height:30px"></span> </div> <!----><div class="flex-1 fr pl10 rightAlign mt10 ellipsis" ng-if="vm.config.subHeader"> <!----> <span ng-bind-html="vm.subHeaderData" id="HEADER_HEADER_3_ADVANCE_SUB_HEADER_3TEST_STATUS" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_SUB_HEADER_' + vm.index + vm.config.key ])"><span class="leftAlign" title="Pass">Pass</span></span> </div><!----> </div> <!----><div class="wid-100 fl rightAlign color-light small-font" ng-if="vm.config.subHeader"> <!----> <span ng-bind-html="vm.config.subHeader.name" id="HEADER_HEADER_3_ADVANCE_SUBHEADER_NAME_3TEST_STATUS" ng-dblclick="vm.isCitationEnabled &amp;&amp; vm.rootScope.$broadcast('openCitationBox', $event, 'HEADER', vm.citationList[ 'HEADER_' + vm.config.view.key + '_ADVANCE_SUBHEADER_NAME_' + vm.index + vm.config.key ])">vs. Previous Period</span> </div><!----> <!----> </div> </div><!----> </header><!----> </div><!----><!----> <!----> </headers>


NOTE: This webpage gets Value from component that are written over JavaScript

DEAL_SUMMARY_HEADER3 is the component name from where the value is getting fetched

Continue reading...