Selector resolved to hidden - playwright and <input> with display: none. Can anyone know how to make it work?

Question

Selector has display: none.

Im using playwright to send file like this:

await page.setInputFiles(
'//*[@id="root"]/div/div/main/div/div[2]/div[3]/input',
file);

And this is error I get:

waiting for selector "//*[@id="root"]/div/div/main/div/div[2]/div[3]/input" selector resolved to hidden

Do you know how to make it work? Thanks

Answer 1

You need to change the display property of the element using the evaluate method.

let inputFileSelector = await page.$('xpath=//*[@id="root"]/div/div/main/div/div[2]/div[3]/input');
await inputFileSelector.evaluate((el) => el.style.display = 'inline'); // or inherit

Or you can also do this directly as

await page.evaluate(() => { document.querySelector('mySelector').style.display = 'inline'; });