Rayrun
← Back to Discord Forum

Can't fill hidden input?

Hello, I think it's a bug but, firstly I ask 😉

I use await page.locator('input').fill('value', {force: true}) in documentation, force is described as "Whether to bypass the actionability checks. Defaults to false." but the test fails because I have got an error "Error: locator.fill: Error: Input of type "hidden" cannot be filled"

This thread is trying to answer question "Why can't I fill a hidden input using the 'force' option in Playwright and how can I resolve this?"

2 replies

I've never tried force on a text input, I don't think it would work. I've only found force to sometimes be useful for buttons which are "there" but are invisibly covered by some other html element. What happens if you don't use force:true

refactoreric

I think most Playwright actions on an element try to act like a user. A user cannot fill hidden elements.

Probably you can evaluate some client side code to do that though: https://playwright.dev/docs/api/class-locator#locator-evaluate

Answer

Interacting with Hidden Input Fields in Playwright

You might find that you can't fill a hidden input field in Playwright using the 'force' option. This is because hidden elements are typically not accessible for interaction. But don't worry, there's a workaround.

Making Hidden Elements Visible

You can make the hidden input field visible by modifying its CSS properties. Here's how you can do it:

// Assuming 'page' represents your Playwright page object
await page.evaluate(() => {
  const hiddenInput = document.querySelector('#hidden-input');
  if (hiddenInput) {
    // Modify CSS properties to make the element visible
    hiddenInput.style.display = 'block';
    // Now you can fill its value
    hiddenInput.value = 'Your value';
  }
});

In this code, we're using the page.evaluate() method to execute JavaScript code within the browser context. This gives us access to DOM manipulation capabilities. We select the hidden input field using document.querySelector(), change its CSS display property to make it visible, and then fill its value.

A Word of Caution

Remember, changing the visibility of hidden elements can affect the functionality or design of the web page you're automating. Make sure your automation actions align with the intended behavior of the website.

So, while you can't directly fill a hidden input field using the 'force' option in Playwright, you can make the element visible using JavaScript code executed through Playwright's API before performing any actions on it. Happy testing!

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.