why nothing is returned when reading distance displayed on the site mentioned in the body using selenium webdriver

Question

I am trying to read distance value from 'Distance by Land Transport' field from the site ( https://www.freemaptools.com/distance-between-canada-postcodes.htm) but I am getting nothing though the calculated distance value is displaying in the field. Below is my code and the site used.

Questions:

1. why I am getting nothing? ( please see below code String variable: strDist shows nothing)
2. Interestingly, when I did inspect the element the value shows 0.00. please see below screen capture.

It looks like I am not understanding something here.

@Test
public void TestDist() {
    
     System.setProperty("webdriver.chrome.driver", "C:\\Users\\...\\eclipse-workspace\\...\\...\\src\\main\\java\\...\\...\\drivers\\chromedriver.exe");  
     WebDriver driver=new ChromeDriver();  
       
     // Launch Website  
     driver.navigate().to("https://www.freemaptools.com/distance-between-canada-postcodes.htm");   
     driver.manage().window().maximize();  
         
     JavascriptExecutor js = (JavascriptExecutor)driver;  
     js.executeScript("scrollBy(0, 500)");  
     
     driver.findElement(By.xpath("//*[@id=\"content\"]/form/table/tbody/tr[2]/td[1]/input")).sendKeys("N3S 7X6");
     driver.findElement(By.xpath("//*[@id=\"content\"]/form/table/tbody/tr[2]/td[3]/input")).sendKeys("N3r 7X6");
     driver.findElement(By.xpath("//*[@id=\"content\"]/form/table/tbody/tr[2]/td[4]/p")).click();
     try {
        Thread.sleep(3000);
    } catch (InterruptedException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
     String strDist = driver.findElement(By.xpath("//*[@id=\"tb_transport\"]")).getText();
     System.out.println(strDist);
} 

enter image description here

Answer 1

Can you try with the below code, I hope it will help you

@Test
public void TestDist() throws InterruptedException {

    System.setProperty("webdriver.chrome.driver", 
    "C:\\Users\\...\\eclipse-workspace\\...\\...\\src\\main\\java\\...\\...\\drivers\\chromedriver.exe"); 
    WebDriver driver = new ChromeDriver();

    // Launch Website
    driver.navigate().to("https://www.freemaptools.com/distance-between-canada-postcodes.htm");
    driver.manage().window().maximize();

    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("scrollBy(0, 500)");
    driver.findElement(By.xpath("//*[@id=\"content\"]/form/table/tbody/tr[2]/td[1]/input")).sendKeys("N3S 7X6");
    driver.findElement(By.xpath("//*[@id=\"content\"]/form/table/tbody/tr[2]/td[3]/input")).sendKeys("N3r 7X6");
    driver.findElement(By.xpath("//*[@id=\"content\"]/form/table/tbody/tr[2]/td[4]/p")).click();
    Thread.sleep(5000);

  WebElement element2 = driver.findElement(By.xpath("//*. 
 [@id='tb_transport']")); 
    
    String text = (String) js.executeScript("return 
    document.getElementById('tb_transport').value", element2);
    System.out.println(text); 


I have used the JavaScriptExecutor to get the value from the textbox 
which is readyonly