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

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

• javascript
• dom
• playwright

• 1 Are you using the latest Playwright version? If I remember correctly a related bug got fixed in the last few releases. If not, I remend to create a bug on GitHub with a repro: github./microsoft/playwright – Max Schmitt Commented Sep 6, 2021 at 10:56

2 Answers 2

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'; });

When your input element is hidden, file chooser dialog is typically triggered by some action. You can start listening to the filechooser event on page and trigger the file selection (typically press some button in the ui that brings up file selection dialog). This use case is discussed in the doc, last paragraph: https://playwright.dev/docs/input#upload-files.