How do i see changes to the DOM when executing javascript with phantomjs and Selenium.WebDriver?

Question

I'm trying to scrape the links from the following site with C#, phantomjs and Selenium. It uses a login popup form which is triggered from a login link. When I execute the code below the popup is displayed correctly in the saved image but the DOM is not updated in the driver.PageSource line. The popup shows a username and password field where the username input has an element id of iptvauth_field_username.

Is there a way to get the latest html that is outputted after triggering the javascript that changes the DOM? this seems like such a trivial thing to do, all the examples online are very basic and don't cover this.

these are my nuget packages

PhantomJS version="2.1.1"

phantomjs.exe version="1.9.2.1"

Selenium.WebDriver version="2.52.0"

var driver = new PhantomJSDriver();
driver.Url = "http://www.ufc.tv/";
driver.Navigate();
var source = driver.PageSource;
var loginLink = driver.FindElementByLinkText("Sign In");
loginLink.Click();

Screenshot sh = driver.GetScreenshot();         // shows popup
sh.SaveAsFile(@"d:\Temp.jpg", ImageFormat.Png);

var username = driver.FindElementById("iptvauth_field_username");   // does not exist
source = driver.PageSource;     // does not show popup in

Possible duplicate of [Selenium: Unable to access iframe and data inside it](http://stackoverflow.com/questions/9607964/selenium-unable-to-access-iframe-and-data-inside-it) — Artjom B., Feb 14 '16 at 10:10
The modal is loaded as an iframe. That's why you don't see it in the source. You have to switch to the frame first. — Artjom B., Feb 14 '16 at 10:11

score 0 · Accepted Answer · answered Feb 15 '16 at 05:01

Check following code it is working fine. I have tested.

           var driver = new FirefoxDriver();
            driver.Navigate().GoToUrl("http://www.ufc.tv/");
            var loginLink = driver.FindElementByLinkText("Sign In");
            loginLink.Click();

            Screenshot sh = driver.GetScreenshot();         // shows popup
            sh.SaveAsFile(@"Temp.jpg", ImageFormat.Png);

            driver.SwitchTo().Frame(driver.FindElement(By.Id("signInFrame")));
            var username = driver.FindElementById("iptvauth_field_username");   // it exist now
            var password = driver.FindElement(By.Id("iptvauth_field_password"));
            var logInButton = driver.FindElement(By.XPath(".//*[@id='iptvauth_page_login']/tbody/tr[5]/td[1]/a/span"));
            var source = driver.PageSource;     // show popup in 
            username.SendKeys("userName");
            password.SendKeys("Password");
            logInButton.Click();

if any issue then let me know. Thanks.

How do i see changes to the DOM when executing javascript with phantomjs and Selenium.WebDriver?

1 Answers1