Open Dreamsorcerer opened 6 months ago
Hi, sorry but I don't understand the question.
Could you elaborate why you don't include a rule while using screen.findByRole("")
?
What's the expected outcome?
As per the documentation, this is given as an example to get a list of suggested roles. I can put the correct role in, but the result is the same.
Normally, there are a list of roles provided before 'Ignored nodes...' that are found in the document, but in many cases (atleast 3 tests I have failing for this now) it doesn't find any roles in the document.
Here's the output in a situation where it appears to be working correctly:
TestingLibraryElementError: Unable to find an accessible element with the role ""
Here are the accessible roles:
button:
Name "Skip to content":
<button
aria-label="Skip to content"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge skip-nav-button css-164tlhb-MuiButtonBase-root-MuiIconButton-root-RaSkipNavigationButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
variant="contained"
/>
Name "Open menu":
<button
aria-label="Open menu"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium RaAppBar-menuButton css-1vx84ty-MuiButtonBase-root-MuiIconButton-root-RaSidebarToggleButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
/>
Name "Configure this page":
<button
aria-label="Configure this page"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
/>
Name "Profile":
<button
aria-label="Profile"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit RaUserMenu-userButton css-1y942vo-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
Name "Columns":
<button
aria-label="Columns"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge css-15rynab-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
/>
Name "Export":
<button
aria-label="Export"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge css-15rynab-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
/>
--------------------------------------------------
banner:
Name "":
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorSecondary MuiAppBar-positionFixed mui-fixed css-uwxfgq-MuiPaper-root-MuiAppBar-root-RaAppBar-root"
/>
--------------------------------------------------
heading:
Name "Simples":
<h6
class="MuiTypography-root MuiTypography-h6 css-vuqtfo-MuiTypography-root"
id="react-admin-title"
/>
[etc. etc.]
--------------------------------------------------
Ignored nodes: comments, script, style
<body
style=""
>
<div>
<div
class="MuiScopedCssBaseline-root css-1uodbwk-MuiScopedCssBaseline-root"
>
<div>
<div
class="layout css-1n2f7rh-RaLayout-root"
>
<button
aria-label="Skip to content"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge skip-nav-button css-164tlhb-MuiButtonBase-root-MuiIconButton-root-RaSkipNavigationButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
variant="contained"
>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<div
class="RaLayout-appFrame"
>
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorSecondary MuiAppBar-positionFixed mui-fixed css-uwxfgq-MuiPaper-root-MuiAppBar-root-RaAppBar-root"
>
<div
class="MuiToolbar-root MuiToolbar-regular RaAppBar-toolbar css-r6ewbb-MuiToolbar-root"
>
<button
aria-label="Open menu"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium RaAppBar-menuButton css-1vx84ty-MuiButtonBase-root-MuiIconButton-root-RaSidebarToggleButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root RaSidebarToggleButton-menuButtonIconClosed MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="MenuIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<h6
class="MuiTypography-root MuiTypography-h6 css-vuqtfo-MuiTypography-root"
id="react-admin-title"
>
<span
class=" css-wr3s1y-RaConfigurable-root"
>
<span>
<span>
Simples
</span>
</span>
</span>
</h6>
<button
aria-label="Configure this page"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1vooibu-MuiSvgIcon-root"
data-testid="SettingsIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<div
class="css-1l0huk-RaLoadingIndicator-root"
>
<span
class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorInherit app-loader RaLoadingIndicator-loader css-62e83j-MuiCircularProgress-root"
role="progressbar"
style="width: 16px; height: 16px;"
>
<svg
class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
viewBox="22 22 44 44"
>
<circle
class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate css-176wh8e-MuiCircularProgress-circle"
cx="44"
cy="44"
fill="none"
r="19"
stroke-width="6"
/>
</svg>
</span>...
62 | test("create form works", async () => {
63 | userEvent.click(await screen.findByLabelText("Create"));
> 64 | screen.getByRole("");
| ^
65 | await waitFor(() => screen.getByRole("heading", {"name": "Create Simple"}));
66 |
67 | await userEvent.type(screen.getByLabelText("Num *"), "12");
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at getByRole (node_modules/@testing-library/dom/dist/query-helpers.js:95:19)
at call (tests/simple.test.js:64:12)
at tryCatch (tests/simple.test.js:2:1)
at Generator._invoke (tests/simple.test.js:2:1)
at Generator.next (tests/simple.test.js:2:1)
at asyncGeneratorStep (tests/simple.test.js:2:1)
at _next (tests/simple.test.js:2:1)
Notice that the start of HTML shown is the same as the first example I posted, and that the first button role suggested here appears in both examples.
My only guess at the moment, is that when the document is above a certain size, it gives up parsing the document and returns no available roles. At that point the function achieves literally nothing and makes the main feature of this library pointless.
I see, thanks.
That could be, but I don't immediately see the reason for that.
You can try increasing the DEBUG_PRINT_LIMIT
(https://testing-library.com/docs/dom-testing-library/api-debugging/), but I don't think this affects the suggested queries.
I've just been going through my tests again, and I've realised that I had made mistakes in the roles I was using. So, the only issue is the suggestions being missing. If I can guess the correct role without suggestions, then it works fine.
Are those elements visible? It would be useful to have a reproduction for this.
Are those elements visible?
In the original example, you can see in the traceback I added {"hidden": true, "suggest": true, "queryFallbacks": true}
, to try and maximise the possibility of getting suggestions. So, I don't think that matters, but I would assume they are given that I manage to select them, and expect a user to be able to see them in a browser.
It would be useful to have a reproduction for this.
The project is dynamically generated and depends on a Python backend. If you're happy to install some Python dependencies, I can give instructions to run the tests.
Alternatively, if I screen.debug() and give you the full HTML output, would you be able to reproduce directly from that?
Having the HTML can be helpful to troubleshoot this. We could also try https://testing-playground.com/ and see its output.
Hi @Dreamsorcerer! Thanks for taking the time to work on this. Can you please create a reproduction using https://testing-library.com/new-dtl?
Having the HTML can be helpful to troubleshoot this. We could also try https://testing-playground.com/ and see its output.
I've added the output from screen.debug(). As the site doesn't display the logged output that would show the suggestions, I'm not entirely sure whether it is reproducing the issue there or not...
This logs the suggested queries for me. https://stackblitz.com/edit/dtl-template-pfpdks?file=src%2Fmain.test.ts
Without a proper reproduction we won't be able to help.
Here are the available roles:
button:
Name "Skip to content":
<button
aria-label="Skip to content"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge skip-nav-button css-164tlhb-MuiButtonBase-root-MuiIconButton-root-RaSkipNavigationButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
variant="contained"
/>
Name "Open menu":
<button
aria-label="Open menu"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium RaAppBar-menuButton css-1vx84ty-MuiButtonBase-root-MuiIconButton-root-RaSidebarToggleButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
/>
Name "Configure this page":
<button
aria-label="Configure this page"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
/>
Name "Profile":
<button
aria-label="Profile"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit RaUserMenu-userButton css-1y942vo-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
/>
--------------------------------------------------
banner:
Name "":
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorSecondary MuiAppBar-positionFixed mui-fixed css-uwxfgq-MuiPaper-root-MuiAppBar-root-RaAppBar-root"
/>
--------------------------------------------------
heading:
Name "Simples":
<h6
class="MuiTypography-root MuiTypography-h6 css-vuqtfo-MuiTypography-root"
id="react-admin-title"
/>
--------------------------------------------------
progressbar:
Name "":
<span
class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorInherit app-loader RaLoadingIndicator-loader css-62e83j-MuiCircularProgress-root"
role="progressbar"
style="width: 16px; height: 16px;"
/>
--------------------------------------------------
main:
Name "":
<main
class="RaLayout-contentWithSidebar"
/>
--------------------------------------------------
spinbutton:
Name "Id":
<input
aria-describedby="data.id-helper-text"
aria-invalid="false"
class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputSizeSmall css-1zuho2-MuiInputBase-input-MuiFilledInput-input"
id="data.id"
name="data.id"
step="any"
type="number"
value="1"
/>
Name "Num":
<input
aria-describedby="data.num-helper-text"
aria-invalid="false"
class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputSizeSmall css-1zuho2-MuiInputBase-input-MuiFilledInput-input"
id="data.num"
name="data.num"
step="any"
I don't know if maybe it gives up after a short amount of time, and my laptop is just slow or something. Couldn't find anything suspicious in the code though.
I think just close this then, I'll just deal with the lack of suggestions half the time for now.
OK, so getByRole() might be working most of the time. But, I seem to have frequent issues with findByRole(). I've got no suggestions with 2 different queries and immediately after changing them to getByRole() I get loads of suggestions.
Looking at the code, isn't this wrapped incorrectly? https://github.com/testing-library/dom-testing-library/blob/main/src/query-helpers.ts#L243-L248
We wrap the query with wrapSingleQueryWithSuggestion() in order to add the suggestions. But, then we wrap that with makeFindQuery(), which wraps the call with waitFor(): https://github.com/testing-library/dom-testing-library/blob/main/src/query-helpers.ts#L133
Surely that means if the query fails, then the waitFor() cancels the request and the suggestions are never created? Maybe it just needs to be wrapped the other way around, with findQuery inside withSuggestion?
Sometimes, getByRole() just doesn't seem to find anything, when there must be dozens of things to select from. Is there a timeout or something that might cause it to fail on larger amounts of content? If so, is there a way to tweak this so it actually works?
Example output after using
screen.findByRole("")
on one of my examples:You can see there are several candidates just within the top of the output that is logged, and yet it fails to find anything at all.
I've also seen cases where I can't find something with
screen.getByRole(...)
, but then am able to find it when searching a subcomponent withwithin(...).getByRole(...)
with the same arguments (where the within component has been selected from screen), which further makes me think there is a problem with large documents.