Element not visible

Question

I am trying to log in to a website using the Chrome WebDriver. The only problem is it appears that the text box where you put the username is not visible. When I run the code if I manually click in the box where the username goes then the program will complete no problem. How do I make the element visible so I can click on it?

When the code gets to username.Click(); I get "element not visible".

static void Main(string[] args)
    {
        var driver = new ChromeDriver();
        var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));
        driver.Navigate().GoToUrl("http://contoso.com/");
        var loginPopUp = wait.Until(d => driver.FindElement(By.XPath("//*[@id='user-menu']/li[2]/a")));
        loginPopUp.Click();
        var username = wait.Until(d => driver.FindElement(By.XPath("//*[@id='login']")));
        const string script = "document.getElementById('login').style.visibility='visible';";
        driver.ExecuteScript(script);
        username.Click();
        username.Clear();
        username.SendKeys("someuser@gmail.com");
        var password = wait.Until(d => driver.FindElement(By.XPath("//*[@id='password']")));
        password.SendKeys("thepassword");
        var login = wait.Until(d => driver.FindElement(By.XPath("//*[@id='popup-body']/div/div[3]/div[5]/a")));
        login.Click();
    }

Answer 1

Username box is not visible. Do it takes time to appear on page?

You can use this to make element visible.

For google.com logo : Make google logo hidden

document.getElementById('hplogo').style.display='none'

Make google logo visible

document.getElementById('hplogo').style.display='block'

Capture the screenshot in test to debug the issue.

Answer 2

Please try to get the element into view by scrolling using this following JS

document.getElementById('login').scrollIntoView(true);

Then you can click() on it.