selector resolved to hidden error

[InduKrish]

while trying to click the checkbox using the following test, it fails with the following error: selector resolved to hidden <title>check</title>

async checkActiveStatusdom(text) {
const header = await this.screen.findByTestId('erow-GroupCode-0');
console.log(" header" + header)
const base = this.within(header).getByText("LINEHOLDER")
console.log("base value" + base);
const check = this.within(header).getByText("check")
console.log(" value " + check)
await expect(base).toContainText(text);
console.log("text assertion successful")
await check.click(); ---> fails

}

output:

headerLocator@query-by-test-id=["erow-GroupCode-0"]
base valueLocator@query-by-test-id=["erow-GroupCode-0"] >> get-by-text=["LINEHOLDER"]
value Locator@query-by-test-id=["erow-GroupCode-0"] >> get-by-text=["check"]
text assertion successful

1. [chromium] › tests/web/vacation.bidaward.defaults.spec.po.new.js:14:9 › Bid and award Default page verification › Default page verification

Test timeout of 30000ms exceeded.

locator.click: Target closed
=========================== logs ===========================
waiting for selector "query-by-test-id=["erow-GroupCode-0"] >> get-by-text=["check"]"
  selector resolved to hidden <title>check</title>
attempting click action
  waiting for element to be visible, enabled and stable
    element is not visible - waiting...
============================================================

[jrolfs]

It looks like you're attempting to click on the SVG <title /> element, which is not a visible element. I suggest you review the following documentation to get a better handle on the general Testing Library philosophy and how it is intended to be used to help you test your application more closely to how your users interact with it:

• https://testing-library.com/docs/guiding-principles
• https://testing-library.com/docs/dom-testing-library/faq
• https://testing-library.com/docs/dom-testing-library/api-accessibility

In this case, ideally, you'd instead be querying for the native checkbox control using an accessible label, like so:

const header = await this.screen.findByTestId('erow-GroupCode-0');
const check = this.within(header).getByRole("checkbox");

await check.click();

Once you're reviewed that, if you're still having this kind of problem, it's really an issue with how you're using Playwright, and it has nothing to do with Playwright Testing Library. I suggest you try to debug your tests using Playwright's robust debugging capabilities before opening an issue here:

• https://playwright.dev/docs/debug#playwright-inspector
• https://playwright.dev/docs/debug#actionability-logs

[InduKrish]

It looks like you're attempting to click on the SVG <title /> element, which is not a visible element. I suggest you review the following documentation to get a better handle on the general Testing Library philosophy and how it is intended to be used to help you test your application more closely to how your users interact with it:

SVG <title /> element - checkbox is visible on the webpage, and it works fine with regular playwright code, can you please clarify what you mean by saying that it is not a visible element while using

const check = this.within(header).getByText("check")
await check.click(); ---> fails

meanwhile i will try this and keep you posted using getByRole()

const header = await this.screen.findByTestId('erow-GroupCode-0');
const check = this.within(header).getByRole("checkbox");

await check.click();

[jrolfs]

The <svg /> element is visible, but <title /> is an inherently invisible element (visible only to screen readers:

✅ Query + click SVG using <title /> as accessible name:

If you really want to click the <svg />, this is probably what you want, but since it's a stylized checkbox I think you really do want to query the checkbox itself as I recommended

playwright-testing-library/test/fixture/locators.test.ts

Lines 122 to 128 in d5a665b

	test.only('supports querying SVG by title', async ({screen}) => {
	const svg = screen.getByRole('img', {name: 'Vector'})
	expect(await svg.count()).toEqual(1)
	await expect(svg.click()).resolves.not.toThrow()
	})

❌ Query + click <title /> within <svg />:

playwright-testing-library/test/fixture/locators.test.ts

Lines 130 to 139 in d5a665b

	test.only('clicking SVG title element', async ({screen, within}) => {
	const svg = screen.getByRole('img', {name: 'Vector'})
	const title = within(svg).getByText('Vector')
	screen.setDefaultTimeout(1000)
	expect(await title.count()).toEqual(1)
	await expect(async () => title.click()).rejects.toThrow()
	})

---

Markup

playwright-testing-library/test/fixtures/page.html

Lines 30 to 38 in d5a665b

	<svg
	role="img"
	xmlns="http://www.w3.org/2000/svg"
	width="128px"
	viewBox="0 0 512 512"
	>
	<title>Vector</title>
	<path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
	</svg>