facing an BDD framework error "ElementNotInteractableException"

Question

Here I am trying to test the my site using BDD python frame work. And Here i am facing an error while we are entering a parameter. The error is like "Element is not interactable". So below I have pasted my snippet of code please tell me where I am going wrong.

.feature file

Feature:  Post Ad testing

  Scenario: Login to site valid parameter:
    Given I launch chrome browser
    When i open web page
    And  maximize the window
    And click on login button
    And enter username "username" and password "password"
    And click on submit button
    Then user successfully login to the  web site

.py file

@when('enter username "{name}" and password "{pass1}"')
def input_validate(context,name,pass1):
    context.driver.find_element_by_id("semail_login").send_keys(name)
    context.driver.find_element_by_id("password176").send_keys(pass1)

error

And enter username "username" and password "password" # steps/postAd.py:24
      Traceback (most recent call last):
        File "C:\Users\USER 1\PycharmProjects\behaveproject\venv\lib\site-packages\behave\model.py", line 1329, in run
          match.run(runner.context)
        File "C:\Users\USER 1\PycharmProjects\behaveproject\venv\lib\site-packages\behave\matchers.py", line 98, in run
          self.func(context, *args, **kwargs)
        File "steps\postAd.py", line 26, in input_validate
          context.driver.find_element_by_id("semail_login").send_keys(name)
        File "C:\Users\USER 1\PycharmProjects\behaveproject\venv\lib\site-packages\selenium\webdriver\remote\webelement.py", line 477, in send_keys
          self._execute(Command.SEND_KEYS_TO_ELEMENT,
        File "C:\Users\USER 1\PycharmProjects\behaveproject\venv\lib\site-packages\selenium\webdriver\remote\webelement.py", line 633, in _execute
          return self._parent.execute(command, params)
        File "C:\Users\USER 1\PycharmProjects\behaveproject\venv\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 321, in execute
          self.error_handler.check_response(response)
        File "C:\Users\USER 1\PycharmProjects\behaveproject\venv\lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 242, in check_response
          raise exception_class(message, screen, stacktrace)
      selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
        (Session info: chrome=93.0.4577.63)

html code

<form class="myform" action="/signin" method="post" onsubmit="return loginfun()">
                {% csrf_token %}
                <h1 style="font-size:25px;margin-top:3px;margin-bottom:10px;">Log In</h1>
                {{email_lb}}
                <div class="form-group">
                    <input id="semail_login" name="semail" placeholder="E-mail Address" type="email">
                    <span class="input-icon"><i class="fa fa-envelope fa1"></i></span>
                    <p id="email_ls" style="color:red;text-align: left;font-size: 12px;"></p>
                </div>
                <div class="form-group">
                    <input class="password_business9866" id="password176" name="password" placeholder="Password"
                           type="password">
                    <!--                    <p style="color:#DB0038;font-size: 8px;position: relative;top: 9px;"-->
                    <!--                       class='password_business_invalid1`23'></p>-->
                    <span class="input-icon"><i class="fa fa-lock fa1"></i></span>
                </div>

                <div class="form-group" style="height: 32px;">
                    <label class="container12" id="remember_me"></label>
                    <input id="Login_remember" class="input" name="remember_me" type="checkbox">
                    <span style="position: relative;top: -10px;">Remember me</span>
                </div>

                <button class="login-btn" type="submit">Log In
                </button>
                <a class="reset-psw forgotPassword" data-dismiss="modal" data-target="#exampleModal" data-toggle="modal"
                   href="#">Forgot Password?</a>
                <p>Don't have account?<a class="" data-dismiss="modal" data-target="#myModal_s" data-toggle="modal"
                                         href="#" style="color:#DB0038;">&nbsp;Sign Up</a></p>
            </form>

Answer 1

This can get a little tricky, with your feature file providing another layer of indirection between what happens on screen and what your test is doing. There are likely one or two fixes you can apply. You might need to apply both.

1. Wait for the "login" button to go stale. The previous step And click on login button presumably causes the page to unload, and the login page to load. In the case of a Single Page Application, the current page is updated with the login screen. You might simply need to wait for the "Login" button to go "stale", meaning that element is no longer attached to the document tree in the browser:

   # In the step definition for 'Given click on login button'
   wait = WebDriverWait(context.driver, 30)
   login_button = context.driver.find_element((By.WHATEVER, "..."))
   login_button.click()
   wait.until(EC.staleness_of(login_button)
   

2. Wait for the username field to be clickable. As the page transitions to the login screen, whether this is due to a new page loading, or the current page being updated, try waiting for the username field in the next step to become clickable, which means you can interact with it using Selenium.

   @when('enter username "{name}" and password "{pass1}"')
   def input_validate(context,name,pass1):
       wait = WebDriverWait(context.driver, 30)
       wait.until(EC.element_to_be_clickable(By.ID, "semail_login")).send_keys(name)
       wait.until(EC.element_to_be_clickable(By.ID, "password176")).send_keys(pass1)
   

You might need to do both. You might need to wait for the "Login" button to become stale in the previous step, and you also might need to wait for the username and password fields to be clickable in the next step.