← Back to Discord Forum

Testing toggle on space

I am doing a test to check if an accordion item can be expanded and collapsed by pressing space. here is my test:

test('should handle keyboard navigation', async ({ mount, page }) => {
  await mount(<Accordion id="accordion" items={data} />)

  const trigger = page.getByText(data[0].title)
  const content = page.getByText(data[0].content)

  // should focus
  await page.keyboard.press('Tab')
  await expect(trigger).toBeFocused()

  // should open by pressing space
  await page.keyboard.press(' ')
  await expect(content).toBeVisible()

  // should close by pressing space
  await page.keyboard.press(' ')
  await expect(content).not.toBeVisible()

the await expect(content).not.toBeVisible() is failing. Here is what the report says: locator resolved to <div role="region" data-focus="" data-state="open" da…>Yes. It adheres to the WAI-ARIA design pattern.</div>

  • unexpected value "visible"

but when I test it in storybook, it closes when I press space. Anyone can help me identify what's wrong? I'm quite new with playwright, so I'm not sure if this is the "right" way of doing this

This thread is trying to answer question "Why is the test failing to confirm that the accordion item is not visible after pressing space the second time?"

1 reply

nevermind, I'm stupid... I was trying to test if it was possible to close the accordion item by pressing space again, but not passing the collapsible prop which allows just that. By default it is false 😅

Related Discord Threads

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.