Error with [ElementNotInteractable] when test with React app input element

[steadylearner]

I was testing with async API of this crate with my React frontend at www.steadylener.com

What I want is very simple

1. I want to grab input part
2. Type Rust
3. Then, find blog titles with get_elements API
4. Write Rust code to make the result file with .md format

The code I used is similar to this.

use thirtyfour::error::WebDriverResult;
use thirtyfour::{
    By, 
    DesiredCapabilities, 
    WebDriver,
    Keys,
    TypingData,
};

use tokio;

#[tokio::main]
async fn main() -> WebDriverResult<()> {
     let caps = DesiredCapabilities::chrome();
     let driver = WebDriver::new("http://localhost:4444/wd/hub", &caps).await?;

     let target = "https://www.steadylearner.com";
     println!("Wait before you play with {}", &target);

     // Navigate to https://www.steadylearner.com.
     driver.get(target).await?;
     println!("{:#?}", &driver.title().await?); // Should be "Steadylearner Home"
     let search_input = driver.find_element(By::Id("searchInput")).await?;
     println!("{}", &search_input.get_attribute("value").await?); // ""

     // The problem happens with the code below
     search_input.send_keys("Rust").await?;
     search_input.send_keys(Keys::Enter).await?;
     println!("{:#?}", &driver.title().await?); // "Posts for Rust"

     Ok(())
}

But, after a long wait, it shows this error.

Error: ElementNotInteractable(WebDriverErrorInfo { status: 400, error: "", value: WebDriverErrorValue { message: "element not interactable\n  (Session info: chrome=79.0.3945.117)", error: Some("element not interactable"), stacktrace: Some("#0 0x5566c2005479 <unknown>\n"), data: None } })

I don't use Chrome browser, but it is installed in my machine and used it to follow the example easily.

My doubts are

1. Is this problem of the configuration of my machine?
2. Is the crate or selnium have a problem with the React app(Steadylearner)?
3. Or there are a problem in my code?

I want to test Selenium with React or other single page apps. But, I haven't used it for a long time. If I missed something, please let me know.

[stevepryde]

The ElementNotInteractable error comes directly from selenium so it's likely that the particular element you are attempting to send keys to (the searchInput field) is not currently interactable.

Looking at your site, the search input field isn't actually visible to the user until they click the search button first. So that is what your code needs to do. You will find this easier if you stick an id on the search button (one of the span elements I think). Then issue a click() to that element, and then the search input element should be interactable. Let me know how you go with that.

Not sure why it would have a long delay, I suspect that might be related to the implicit wait time used. I set it to 30s by default but you can change it in your code to suit your preference. See the set_*_timeout() methods on WebDriver.

[steadylearner]

I forget that I had to click it first. Sorry, it's been a time that I used it and wanted to use with your crate because I find it very interesting.

I will test it again later and close the issue.

Thanks for the fast response.