Acceptance test fillIn can't find selector


I don’t understand why fillIn can’t find ‘data-test-code-nav-selector’.

I have paused the test and using the devtools I copied this DOM excerpt. It displays as expected. As you can see, the select tag has the expected attribute.

<select label="codingDropdown" class="h-full bg-gray-50 rounded shadow border py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" data-test-code-nav-selector="">
    <option value="PDF_I10_PCS_APPENDICES">ICD-10 PCS Appendices</option>
    <option value="PDF_I10_PCS_REFERENCE_MANUAL">ICD-10-PCS Reference Manual</option>

Then, in the test.js file, I’m calling fillIn with the same attribute.

await this.pauseTest();
fillIn('data-test-code-nav-selector', 'PDF_I10_PCS_REFERENCE_MANUAL');

But the test server states:

global failure: Error: Element not found when calling `fillIn('data-test-code-nav-selector')`.@ 10974 ms
Error: Element not found when calling `fillIn('data-test-code-nav-selector')`.

EDIT: found it.

fillIn('data-test-code-nav-selector', 'PDF_I10_PCS_REFERENCE_MANUAL');

should be

fillIn('[data-test-code-nav-selector]', 'PDF_I10_PCS_REFERENCE_MANUAL');