getByRole yields Failed to execute 'querySelectorAll' on 'Element': '[role~="textbox"],[object Set]' is not a valid selector #1057
Description
@testing-library/domversion: 8.9.0- Testing Framework and version:
"@angular/cli": "~11.2.6",
"@angular/compiler-cli": "~11.2.7",
"@testing-library/angular": "^10.11.0",
"@testing-library/dom": "^8.9.0",
"@testing-library/jasmine-dom": "^1.2.0",
"@testing-library/user-event": "^13.2.1",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"@types/uuid": "^8.3.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"puppeteer": "^10.4.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.5"
- DOM Environment:
Relevant code or config:
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
random: false
},
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage/folder'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: true,
restartOnFileChange: true
});
};
What you did and What happened:
Whenever tests run locally (on mac/windows), they pass without a problem.
When they run in a container/pipeline, headless, they fail when getByRole runs. The issue happening gives this stack trace
Chrome Headless 93.0.4577.0 (Linux x86_64) ListComponent should apply search filter not found FAILED
SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '[role~="textbox"],[object Set]' is not a valid selector.
error properties: Object({ code: 12, INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4, INVALID_CHARACTER_ERR: 5, NO_DATA_ALLOWED_ERR: 6, NO_MODIFICATION_ALLOWED_ERR: 7, NOT_FOUND_ERR: 8, NOT_SUPPORTED_ERR: 9, INUSE_ATTRIBUTE_ERR: 10, INVALID_STATE_ERR: 11, SYNTAX_ERR: 12, INVALID_MODIFICATION_ERR: 13, NAMESPACE_ERR: 14, INVALID_ACCESS_ERR: 15, VALIDATION_ERR: 16, TYPE_MISMATCH_ERR: 17, SECURITY_ERR: 18, NETWORK_ERR: 19, ABORT_ERR: 20, URL_MISMATCH_ERR: 21, QUOTA_EXCEEDED_ERR: 22, TIMEOUT_ERR: 23, INVALID_NODE_TYPE_ERR: 24, DATA_CLONE_ERR: 25 })
Error: Failed to execute 'querySelectorAll' on 'Element': '[role~="textbox"],[object Set]' is not a valid selector.
at queryAllByRole (node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1911:1)
at node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1355:1
at node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1330:1
at node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1383:1
at src/app/users/user-list/user-list.component.spec.ts:51:31
at
at fulfilled (node_modules/tslib/tslib.es6.js:73:42)
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:372:1)
at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:301:1)
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:371:1)
Chrome Headless 93.0.4577.0 (Linux x86_64): Executed 240 of 242 (12 FAILED) (skipped 2) (4.602 secs / 3.474 secs)
Reproduction:
An example test
await setup();
const searchText = screen.getByRole('textbox', { name: /search users.../i });
const searchButton = screen.getByRole('button', { name: /search/i });
userEvent.type(searchText, 'Not Found In Grid');
userEvent.click(searchButton);
const nameExp: RegExp = new RegExp(User.person.lastNameFirst, 'i');
const gridItem = screen.queryByRole('gridcell', { name: nameExp });
expect(gridItem).toBeNull();