playwright issue with Toolbar.Item

[hamed-musallam]

I'm currently in the process of refactoring the NMRium panels toolbar. I'm replacing all the buttons within the toolbar with the toolbar component. However, I've encountered an issue with Playwright that I'm struggling to understand. It seems that the locator function is unable to resolve the _react=ToobarItem[text="hide peaks" i] selector properly, it works as expected in one scenario when I set the noToolTip property over the toolbar item, the reason behind this behavior is that the locator resolves 2 elements the tooltip and the button and it is unclear to me why the tooltip wrapper element it stays in DOM once mouse goes out of the tool item

https://github.com/cheminfo/nmrium/actions/runs/7961287963/job/21732151923?pr=2911 https://github.com/cheminfo/nmrium/pull/2911

Could anyone give a hand on this issue?

[stropitek]

it is unclear to me why the tooltip wrapper element it stays in DOM once mouse goes out of the tool item

This is just how blueprintjs works. It does not unmount the portal div for the tooltip until the component is unmounted.

I'm not used to writing playwright selectors so I don't think I can help you create the right selector.

[targos]

I think you should add a discriminant to your selector, such as button ?

[hamed-musallam]

I have tried all available options, and the only way that works for me is using the id _react=ToobarItem[id="ranges-toggle-peaks"] >> nth=0. rather than the old locator selector _react=RangesHeader >> _react=ToobarItem[text="hide peaks" i] >> nth=0

[targos]

Why can't you use button in your selector?

[hamed-musallam]

I attempted to use the button selector instead of nth=0 but unfortunately, it did not work, As you can see this is what the locator resolve for locator('_react=ToolbarItem[id="ranges-toggle-peaks"][active=true]')

Error: expect.toBeVisible: Error: strict mode violation: locator('_react=ToolbarItem[id="ranges-toggle-peaks"][active=true]') resolved to 2 elements:
    1) <button tabindex="0" type="button" aria-expanded="false"…>…</button> aka locator('button:nth-child(9)')
    2) <div aria-live="polite" class="bp5-overlay"></div> aka locator('.bp5-overlay').first()

[targos]

That selector doesn't have any button part.

Also, ideally we should be using accessible selectors like getByRole: https://playwright.dev/docs/locators#locate-by-role. If there's no name (or no way to add a name to the ToolbarItem's button), we can add something for it.

[hamed-musallam]

The problem is that the "toggle peaks" button exists in multiple panels ( the peaks panel and the ranges panel )

[targos]

That problem should be solved by using a selector in front like you showed above: _react=RangesHeader

[targos]

You can call locateByRole on a locator itself: https://playwright.dev/docs/locators#matching-inside-a-locator

[targos]

It's common on pages to have multiple similar elements, typically in lists. Playwright is ready for these cases.

[stropitek]

@hamed-musallam it this resolved in NMRium or do you still think the resolution is in react-science?

[hamed-musallam]

@stropitek

Indeed, the issue has been resolved in NMRium. Thanks