Information inside Html Node not visible

Question

I am trying to grab a phone number from a node from a website. For some reason when I inspect the node in chrome the actual number inside of the element is not visible. Here is the website that I am attempting to grab the number from: https://tempophone.com/ . Am I inspecting the wrong element or is it just not possible to grab the phone number from the website by accessing the node. Here is my code, I am using htmlAgilityPack:

        string url = "https://tempophone.com/";
        HtmlWeb web = new HtmlWeb();
        HtmlDocument doc = web.Load(url);

        var phoneNumber = doc.DocumentNode.SelectNodes("//*[@id=\"temporary - phone\"]")[0].InnerText;
        if(phoneNumber != null)
            Console.WriteLine(phoneNumber);
        else
            Console.WriteLine("null");

Here is a screenshot of the inspected element, as you can see there is no phone number there:

Answer 1

Firstly there is no text inside that node.

Second what you want is this.

string s = doc.DocumentNode.SelectNodes("//*[@id='temporary-phone']")[0].GetAttributeValue("value", "false");

Third. This will always return "Loading...". Because the attribute 'value' in the node is updated/changed by the use javascript. When you use HtmlWeb or HttpWebRequest you will ALWAYS get the source of the page. If you want to be able to load dynamic content into your HtmlDocument you will need to use WebBrowser or Selenium with WebDriver.

How-to with Selenium and FirefoxDriver

        var driver = new FirefoxDriver();
        driver.Navigate().GoToUrl("https://tempophone.com/");
        Thread.Sleep(2000);
        driver.FindElement(By.XPath("//button[@id='check-phone']")).Click();
        string s = driver.FindElement(By.XPath("//h1[@id='phone-number']")).GetAttribute("data-phone-number");
        Console.WriteLine("Here: " + s);

Or you could just call their API

https://tempophone.com/api/v1/phones/random