Webpage UI elements and forms are broken while interacting using expected_conditions as visibility_of_element_located() using Selenium and Python

Question

Having issue with selenium, while running my test chrome page are broken(some forms are broken, fields not in correct position, therefore cant fill data on it)

Should open like this

But have this:

In case have similar version of chromedriver and chrome:

current google-chrome version is 99.0.4844
Get LATEST chromedriver version for 99.0.4844 google-chrome
Driver [C:\Users\yerba\.wdm\drivers\chromedriver\win32\99.0.4844.51\chromedriver.exe] found in cache

My code:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.options import Options

url = "https://opi.dfo.kz/p/ru/archive-publication/corporative-events-2020-14-07"
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()))
driver.maximize_window()
driver.get(url)
wait = WebDriverWait(driver, 20)
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[@class='logic-group-condition' and .//span[@field-name='tbOpiActiveRevisions_flBin']]"))).click()
wait.until(EC.visibility_of_element_located((By.XPATH, "//input[@class='editor-text']"))).send_keys("010140000143")

Answer 1

As per the Selenium Python API docs visibility_of_element_located() is the expectation for checking that an element is present on the DOM of a page and visible. Visibility means that the element is not only displayed but also has a height and width that is greater than 0. However, this condition doesn't garuntees that the element is clickable and interactable.

---

Solution

Ideally, to invoke click() and send_keys() instead of visibility_of_element_located() you need to induce WebDriverWait for the element_to_be_clickable() as follows:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='logic-group-condition' and .//span[@field-name='tbOpiActiveRevisions_flBin']]"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='editor-text']"))).send_keys("010140000143")