I need to click element (dropdown) loaded by js and visible only after clicking element below. My mocha test is throwing:
ElementNotInteractableError: element not interactable
Can you help?
const { Builder, By, Key, until } = require('selenium-webdriver')
const assert = require('assert')
describe('test create node/folder', function(done) {
this.timeout(30000)
let driver
let vars
beforeEach(async function() {
driver = await new Builder().forBrowser('chrome').build()
vars = {}
})
afterEach(async function() {
await driver.quit();
})
it('test name', async function() {
await driver.get("https://testing-website.com/")
// Some testing steps representing user behavior navigating the website
await driver.findElement(By.css(".px-2 > .w-fit > .d-flex > .hover-visible > .hover-visible-el > .mx-2 > .ui-svg-inline"))
await driver.findElement(By.css(".px-2 > .w-fit > .d-flex > .hover-visible > .hover-visible-el > .mx-2 > .ui-svg-inline")).click()
// some steps after
})
})
How to simulate mouse click on the element and load the code under?
The answer is to sumulate mouse hoover in the following way:
await driver.wait(until.elementLocated(By.css(".px-2 > .w-fit > .d-flex > .hover-visible > .hover-visible-el > .mx-2 > .ui-svg-inline")), 30000)
{
const hoverLocation = await driver.findElement(By.css(".px-2 > .w-fit > .d-flex > .hover-visible > .hover-visible-el > .mx-2 > .ui-svg-inline"));
const actions = driver.actions({ bridge: true });
await actions.move({origin: hoverLocation}).perform();
}