Not able to read the Mobile number from a webpage - watir

Question

Today I have come across an interesting question in stackoverflow in the side of Java Selenium Binding, I am trying to find a solution through WATIR but I couldn't succeed here,
I try to read the mobile number from a page and here is the webpage
<span class="telnowpr">
<a class="tel mtel">
<span class="mobilesv icon-ba"/>
<span class="mobilesv icon-ts"/>
<span class="mobilesv icon-oqp"/>
<span class="mobilesv icon-wx"/>
<span class="mobilesv icon-nlm"/>
<span class="mobilesv icon-ts"/>
<span class="mobilesv icon-ji"/>
<span class="mobilesv icon-ji"/>
<span class="mobilesv icon-ji"/>
<span class="mobilesv icon-fde"/>
<span class="mobilesv icon-fde"/>
<span class="mobilesv icon-nlm"/>
<span class="mobilesv icon-lk"/>
</a>
,
<a class="tel mtel">
<span class="mobilesv icon-ba"/>
<span class="mobilesv icon-ts"/>
<span class="mobilesv icon-oqp"/>
<span class="mobilesv icon-wx"/>
<span class="mobilesv icon-nlm"/>
<span class="mobilesv icon-ts"/>
<span class="mobilesv icon-ji"/>
<span class="mobilesv icon-ji"/>
<span class="mobilesv icon-ji"/>
<span class="mobilesv icon-fde"/>
<span class="mobilesv icon-fde"/>
<span class="mobilesv icon-nlm"/>
<span class="mobilesv icon-ikj"/>
</a>
</span>
Each and every span is holding a single number which I can see when move the firebug tool arrow but no number is inside the span in html but however it's appearing in the page. I tried to extract through value and also text but no suceess so far, I haven't seen pages like this so far.
Code
b = Watir::Browser.new #driver
b.goto 'https://www.justdial.com/Ahmedabad/Knife-Fork-Restaurant-Shah-E-Alam-Tollnaka-Opposite-Swaminarayan-College-Shah-Alam/079PXX79-XX79-170524174654-D3J2_BZDET?xid=QWhtZWRhYmFkIEFmZ2hhbmkgUmVzdGF1cmFudHM='
p b.span(class: 'telnowpr').text
which actually prints a comma, this prints a comma because comma appears between two <a> but I don't how to bring out all the numbers. Can anyone help me?

Answer 1

They appear to be using icons to display the numbers instead of just numbers. I presume it is to prevent bots and automated software from collecting all of the numbers for spam.
Each number appears to have a unique css class, so why don't you create a function that will check the text in the class and return the number it corresponds to?

Answer 2

Try something like below:
List<WebElement> allSpans = driver.findElements(By.cssSelector("ul#comp-contact span.telnowpr >a > span.icon-acb"));
System.out.println(allSpans.size());
//for(WebElement item : allSpans) {
String script = "return window.getComputedStyle(document.querySelector('ul#comp-contact span.telnowpr >a > span.icon-acb'),':before').getPropertyValue('content')";
JavascriptExecutor js = (JavascriptExecutor) driver;
String content = (String) js.executeScript(script);
System.out.println("Value : " + content);
//}
this is for a single span element shown in below image, You'll need to to do it for all <span> elements under
<ul id="comp-contact">
: