Closed hamed-musallam closed 5 months ago
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.
I think you should add a discriminant to your selector, such as button
?
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
Why can't you use button
in your selector?
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()
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.
The problem is that the "toggle peaks" button exists in multiple panels ( the peaks panel and the ranges panel )
That problem should be solved by using a selector in front like you showed above: _react=RangesHeader
You can call locateByRole
on a locator itself: https://playwright.dev/docs/locators#matching-inside-a-locator
It's common on pages to have multiple similar elements, typically in lists. Playwright is ready for these cases.
@hamed-musallam it this resolved in NMRium or do you still think the resolution is in react-science?
@stropitek
Indeed, the issue has been resolved in NMRium. Thanks
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 thenoToolTip
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 itemhttps://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?