findByRole() finds no candidates #1283
Comments
Dreamsorcerer
changed the title
|
Hi, sorry but I don't understand the question. |
|
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: 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. |
|
I've just been going through my tests again, and I've realised that I had made mistakes in the roles I was using. |
|
Are those elements visible? |
In the original example, you can see in the traceback I added
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. |
|
Hi @Dreamsorcerer! Thanks for taking the time to work on this. |
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. 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? 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? |
Dreamsorcerer
changed the title
Dreamsorcerer
changed the title
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.The text was updated successfully, but these errors were encountered: