Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Radix-UI Select component breaks in Firefox tests

See original GitHub issue

Current behavior

Issuing .click() on a Radix-UI Select Trigger inside a Cypress test running on Firefox will throw the following error:

(uncaught exception)NotFoundError: Element.releasePointerCapture: Invalid pointer id
image

Desired behavior

The .click() should open the select component’s dropdown menu as in the following screenshot.

image

Test code to reproduce

  1. Clone https://github.com/radix-ui/primitives
  2. yarn install
  3. yarn dev
  4. yarn cypress:dev
  5. Run the Select.spec.ts in Firefox (Firefox 106 for me)

The repo is using an older Cypress version, but the problem is also reproducible with the newest Cypress version with yarn add -D cypress@latest and running the automatic version migrations.

Cypress Version

v10.11.0

Node version

v14.17.0

Operating System

macOS

Debug Logs

cypress:server:controllers:spec request for { spec: 'cypress/e2e/Select.cy.ts' } +3ms
  cypress:server:preprocessor getting file cypress/e2e/Select.cy.ts +3ms
  cypress:server:preprocessor getFile /Users/ext-martin.yrjola/git/primitives/cypress/e2e/Select.cy.ts +0ms
  cypress:lifecycle:EventRegistrar execute plugin event 'file:preprocessor' Node 'v16.16.0' with args: EventEmitter { _events: [Object: null prototype] { rerun: [Function (anonymous)] }, _eventsCount: 1, _maxListeners: undefined, filePath: '/Users/ext-martin.yrjola/git/primitives/cypress/e2e/Select.cy.ts', shouldWatch: true, outputPath: '/Users/ext-martin.yrjola/Library/Application Support/Cypress/cy/production/projects/primitives-58a38e2c5326f79f7bdc4ee03b562255/bundles/cypress/e2e/Select.cy.ts', [Symbol(kCapture)]: false } undefined undefined +3ms
  cypress:lifecycle:ProjectConfigManager call event file:preprocessor for invocation id inv25 +3ms
  cypress:lifecycle:ProjectConfigManager promise resolved for id 'inv24' with value /Users/ext-martin.yrjola/Library/Application Support/Cypress/cy/production/projects/primitives-58a38e2c5326f79f7bdc4ee03b562255/bundles/cypress/support/e2e.js +1ms
  cypress:server:controllers:spec sending spec { filePath: '/Users/ext-martin.yrjola/Library/Application Support/Cypress/cy/production/projects/primitives-58a38e2c5326f79f7bdc4ee03b562255/bundles/cypress/support/e2e.js' } +1ms
  cypress:lifecycle:child:RunPlugins:46935 execute plugin event: file:preprocessor ({ invocationId: 'inv25', eventId: 2 }) +3ms
  cypress:webpack user options: { typescript: '/Users/ext-martin.yrjola/git/primitives/node_modules/typescript/lib/typescript.js', webpackOptions: { mode: 'development', node: { global: true, __filename: true, __dirname: true }, module: { rules: [Array] }, resolve: { extensions: [Array], alias: [Object], plugins: [Array] }, entry: [ '/Users/ext-martin.yrjola/git/primitives/cypress/e2e/Select.cy.ts' ], output: { publicPath: '', path: '/Users/ext-martin.yrjola/Library/Application Support/Cypress/cy/production/projects/primitives-58a38e2c5326f79f7bdc4ee03b562255/bundles/cypress/e2e', filename: 'Select.cy.ts.js' }, devtool: 'inline-source-map', plugins: [ [LimitChunkCountPlugin], [LimitChunkCountPlugin] ] }, __typescriptSupportAdded: true } +3ms
  cypress:webpack get /Users/ext-martin.yrjola/git/primitives/cypress/e2e/Select.cy.ts +1ms
  cypress:webpack already have bundle for /Users/ext-martin.yrjola/git/primitives/cypress/e2e/Select.cy.ts +0ms
  cypress:lifecycle:ProjectConfigManager promise resolved for id 'inv25' with value /Users/ext-martin.yrjola/Library/Application Support/Cypress/cy/production/projects/primitives-58a38e2c5326f79f7bdc4ee03b562255/bundles/cypress/e2e/Select.cy.ts.js +2ms
  cypress:server:controllers:spec sending spec { filePath: '/Users/ext-martin.yrjola/Library/Application Support/Cypress/cy/production/projects/primitives-58a38e2c5326f79f7bdc4ee03b562255/bundles/cypress/e2e/Select.cy.ts.js' } +2ms
GET /__cypress/tests?p=cypress/support/e2e.js 200 5.438 ms - -
  cypress:server:socket-base automation:request get:cookies { domain: 'localhost' } +3m
  cypress:server:automation:cookies getting:cookies { domain: 'localhost' } +3m
  cypress:server:socket-base backend:request { eventName: 'reset:server:state', args: [] } +1ms
  cypress:proxy:http:util:buffers resetting buffers +3m
  cypress:server:remote-states resetting remote state +839ms
  cypress:server:automation:cookies received get:cookies [] +5ms
  cypress:launcher:browsers firefox stderr: JavaScript error: resource://gre/modules/ExtensionChild.jsm, line 836: DataCloneError: Function object could not be cloned. +3m
  cypress:server:socket-base backend:request { eventName: 'resolve:url', args: [ 'http://localhost:9009/iframe.html?id=components-select--cypress', { auth: null, failOnStatusCode: true, retryOnNetworkFailure: true, retryOnStatusCodeFailure: false, retryIntervals: [Array], method: 'GET', body: null, headers: {}, timeout: 30000, isFromSpecBridge: false, hasAlreadyVisitedUrl: false } ] } +94ms
  cypress:server:server-e2e resolving visit { url: 'http://localhost:9009/iframe.html?id=components-select--cypress', headers: { host: 'localhost:9009', 'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:106.0) Gecko/20100101 Firefox/106.0', accept: '*/*', 'accept-language': 'en-US,en;q=0.5', 'accept-encoding': 'gzip, deflate', 'sec-websocket-version': '13', origin: 'http://localhost:9009', 'sec-websocket-extensions': 'permessage-deflate', 'sec-websocket-key': '2VQBP0NQkW01pUwzrgmRCg==', connection: 'keep-alive, Upgrade', pragma: 'no-cache', 'cache-control': 'no-cache', upgrade: 'websocket' }, options: { auth: null, failOnStatusCode: true, retryOnNetworkFailure: true, retryOnStatusCodeFailure: false, retryIntervals: [ 0, 100, 200, 200 ], method: 'GET', body: null, headers: {}, timeout: 30000, isFromSpecBridge: false, hasAlreadyVisitedUrl: false } } +3m
  cypress:proxy:http:util:buffers resetting buffers +93ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +3m
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +94ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting primary remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } +0ms
  cypress:server:server-e2e sending request with options { auth: null, failOnStatusCode: true, retryOnNetworkFailure: true, retryOnStatusCodeFailure: false, retryIntervals: [ 0, 100, 200, 200 ], method: 'GET', body: null, headers: { accept: 'text/html,*/*' }, timeout: 30000, isFromSpecBridge: false, hasAlreadyVisitedUrl: false, gzip: false, url: 'http://localhost:9009/iframe.html?id=components-select--cypress', onBeforeReqInit: [Function: runPhase], followRedirect: [Function: followRedirect] } +1ms
  cypress:server:automation:cookies getting:cookies { url: 'http://localhost:9009/iframe.html?id=components-select--cypress' } +91ms
  cypress:server:automation:cookies received get:cookies [] +32ms
  cypress:server:request got cookies from browser { reqUrl: 'http://localhost:9009/iframe.html?id=components-select--cypress', cookies: [] } +983ms
  cypress:server:request sending request as stream { auth: null, failOnStatusCode: true, retryOnNetworkFailure: true, retryOnStatusCodeFailure: false, retryIntervals: [ 0, 100, 200, 200 ], method: 'GET', body: null, headers: { accept: 'text/html,*/*', 'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:106.0) Gecko/20100101 Firefox/106.0' }, timeout: 30000, isFromSpecBridge: false, hasAlreadyVisitedUrl: false, gzip: false, url: 'http://localhost:9009/iframe.html?id=components-select--cypress', onBeforeReqInit: [Function: runPhase], followAllRedirects: true } +0ms
  cypress:network:agent addRequest called { isHttps: false, href: 'http://localhost:9009/iframe.html?id=components-select--cypress' } +3m
  cypress:network:agent got family { family: 4, href: 'http://localhost:9009/iframe.html?id=components-select--cypress' } +0ms
  cypress:server:request received status code & headers on request { requestId: 'request26', statusCode: 200, headers: { 'content-type': 'text/html; charset=UTF-8' } } +4ms
  cypress:server:request successful response received { requestId: 'request26' } +0ms
  cypress:server:server-e2e resolve:url headers received, buffering response { headers: { 'x-powered-by': 'Express', 'access-control-allow-origin': '*', 'access-control-allow-headers': 'Origin, X-Requested-With, Content-Type, Accept', 'accept-ranges': 'bytes', 'content-type': 'text/html; charset=UTF-8', 'content-length': '12565', etag: 'W/"3115-OJ4FnEieZl10RybcZpMwlmtlq8s"', vary: 'Accept-Encoding', date: 'Sat, 29 Oct 2022 14:11:50 GMT', connection: 'keep-alive', 'keep-alive': 'timeout=5' }, statusCode: 200 } +37ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +37ms
  cypress:server:automation:cookies getting:cookies { domain: 'localhost' } +5ms
  cypress:server:automation:cookies received get:cookies [] +4ms
  cypress:server:server-e2e setting details resolving url { isOkStatusCode: true, contentType: 'text/html', url: 'http://localhost:9009/iframe.html?id=components-select--cypress', status: 200, cookies: [], statusText: 'OK', redirects: [], originalUrl: 'http://localhost:9009/iframe.html?id=components-select--cypress' } +5ms
  cypress:server:server-e2e resolve:url response ended, setting buffer { newUrl: 'http://localhost:9009/iframe.html?id=components-select--cypress', details: { isOkStatusCode: true, contentType: 'text/html', url: 'http://localhost:9009/iframe.html?id=components-select--cypress', status: 200, cookies: [], statusText: 'OK', redirects: [], originalUrl: 'http://localhost:9009/iframe.html?id=components-select--cypress', isHtml: true } } +1ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +7ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states setting remote state { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for http://localhost:9009 +44ms
  cypress:network:GET /iframe.html?id=components-select--cypress 200 7.039 ms - -
cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +0ms
  cypress:proxy:http:util:buffers setting buffer { url: 'http://localhost:9009/iframe.html?id=components-select--cypress' } +49ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +4ms
  cypress:proxy:http:util:buffers found request buffer { buffer: { url: 'http://localhost:9009/iframe.html?id=components-select--cypress' } } +7ms
  cypress:net-stubbing:server:intercept-response InterceptResponse { req: { url: '/iframe.html?id=components-select--cypress' }, request: undefined } +3m
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +8ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +12ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +2ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +2ms
  cypress:launcher:browsers firefox stderr: JavaScript error: resource://gre/modules/ExtensionChild.jsm, line 836: DataCloneError: Function object could not be cloned. +147ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +23ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009/runtime~main.iframe.bundle.js +25ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states GET /runtime~main.iframe.bundle.js 304 14.557 ms - -
getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +0ms
  cypress:server:stream_buffer stream buffer writeable final called +3m
  cypress:network:agent addRequest called { isHttps: false, href: 'http://localhost:9009/runtime~main.iframe.bundle.js' } +51ms
  cypress:network:agent got family { family: 4, href: 'http://localhost:9009/runtime~main.iframe.bundle.js' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: [3[0mGET /main.iframe.bundle.js 304 10.732 ms - -
2m'localhost' } +4ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009/vendors~main.iframe.bundle.js +4ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +0ms
  cypress:server:stream_buffer stream buffer writeable final called +4ms
  cypress:network:agent addRequest called { isHttps: false, href: 'http://localhost:9009/vendors~main.iframe.bundle.js' } +5ms
  cypress:network:agent got family { family: 4, href: 'http://localhost:9009/vendors~main.iframe.bundle.js' } +0ms
  cypress:server:request received status code & headers on request { requestId: 'request27', statusCode: 304, headers: {} } +54ms
  cypress:server:request successful response received { requestId: 'request27' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost'[39[0mGET /vendors~main.iframe.bundle.js 304 23.448 ms - -
m } +5ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009/main.iframe.bundle.js +5ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +0ms
  cypress:server:stream_buffer stream buffer writeable final called +5ms
  cypress:network:agent addRequest called { isHttps: false, href: 'http://localhost:9009/main.iframe.bundle.js' } +4ms
  cypress:network:agent got family { family: 4, href: 'http://localhost:9009/main.iframe.bundle.js' } +0ms
  cypress:net-stubbing:server:intercept-response InterceptResponse { req: { url: '/runtime~main.iframe.bundle.js' }, request: undefined } +37ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +2ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting primary remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +0ms
  cypress:server:request received status code & headers on request { requestId: 'request29', statusCode: 304, headers: {} } +9ms
  cypress:server:request successful response received { requestId: 'request29' } +0ms
  cypress:net-stubbing:server:intercept-response InterceptResponse { req: { url: '/main.iframe.bundle.js' }, request: undefined } +7ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +6ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +6ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting primary remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } +1ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +0ms
  cypress:server:request received status code & headers on request { requestId: 'request28', statusCode: 304, headers: {} } +8ms
  cypress:server:request successful response received { requestId: 'request28' } +0ms
  cypress:net-stubbing:server:intercept-response InterceptResponse { req: { url: '/vendors~main.iframe.bundle.js' }, request: undefined } +7ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +7ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +7ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting primary remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +1ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +235ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009/__webpack_hmr +234ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +1ms
  cypress:server:stream_buffer stream buffer writeable final called +251ms
  cypress:network:agent addRequest called { isHttps: false, href: 'http://localhost:9009/__webpack_hmr' } +252ms
  cypress:network:agent got family { family: 4, href: 'http://localhost:9009/__webpack_hmr' } +0ms
  cypress:server:request received status code & headers on request { requestId: 'request30', statusCode: 200, headers: { 'content-type': 'text/event-stream;charset=utf-8' } } +259ms
  cypress:server:request successful response received { requestId: 'request30' } +0ms
  cypress:net-stubbing:server:intercept-response InterceptResponse { req: { url: '/__webpack_hmr' }, request: undefined } +260ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +23ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +23ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting primary remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +4ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +4ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +110ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009/1.iframe.bundle.js +110ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +0ms
  cypress:server:stream_buffer stream buffer writeable final called +138ms
  cypress:network:agent addRequest called { isHttps: false, href: 'http://localhost:9009/1.iframe.bundle.js' } +137ms
  cypress:network:agent got family { family: 4, href: 'http://localhost:9009/1.iframe.bundle.js' } +0ms
  cypress:server:request received status code & headers on request { requestId: 'request31', statusCode: 304, headers: {} } +117ms
  cypress:server:request successful response received { requestId: 'request31' } +1ms
  cypress:net-stubbing:server:intercept-response InterceptResponse { req: { url: '/1.iframe.bundle.js' }, request: undefined } +117ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: nullGET /1.iframe.bundle.js 304 6.203 ms - -
, domain: '', tld: 'localhost' } +4ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +4ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting primary remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +1ms
  cypress:launcher:browsers firefox stderr: JavaScript error: http://localhost:9009/main.iframe.bundle.js, line 37710: NotFoundError: Element.releasePointerCapture: Invalid pointer id +774ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +363ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009/runtime-error +363ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +1ms
  cypress:server:stream_buffer extending buffer to accomodate new chunk { bufferLength: 2048, newBufferLength: 8192 } +368ms
  cypress:server:stream_buffer appending chunk to buffer { bytesWritten: 0, chunkLength: 4140 } +1ms
  cypress:network:agent addRequest called { isHttps: false, href: 'http://localhost:9009/runtime-error' } +369ms
  cypress:network:agent got family { family: 4, href: 'http://localhost:9009/runtime-error' } +0ms
  cypress:server:stream_buffer stream buffer writeable final called +0ms
  cypress:server:request received status code & headers on request { requestId: 'request32', statusCode: 404, headers: { 'content-type': 'text/html; charset=utf-8' } } +370ms
  cypress:server:request successful response received { requestId: 'request32' } +1ms
  cypress:net-stubbing:server:intercept-response InterceptResponse { req: { url: '/runtime-error' }, request: undefined } +372ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +7ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: POST /runtime-error 404 12.192 ms - -
null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +8ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +2ms
  cypress:server:remote-states getting primary remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } +1ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +1ms
  cypress:launcher:browsers firefox stderr: JavaScript error: http://localhost:9009/main.iframe.bundle.js, line 37710: NotFoundError: Element.releasePointerCapture: Invalid pointer id +21ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +11ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009/runtime-error +11ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +1ms
  [38;0[0mPOST /runtime-error 404 7.458 ms - -
5;173;1mcypress:server:stream_buffer extending buffer to accomodate new chunk { bufferLength: 2048, newBufferLength: 8192 } +22ms
  cypress:server:stream_buffer appending chunk to buffer { bytesWritten: 0, chunkLength: 4140 } +0ms
  cypress:network:agent addRequest called { isHttps: false, href: 'http://localhost:9009/runtime-error' } +22ms
  cypress:network:agent got family { family: 4, href: 'http://localhost:9009/runtime-error' } +0ms
  cypress:server:stream_buffer stream buffer writeable final called +0ms
  cypress:server:request received status code & headers on request { requestId: 'request33', statusCode: 404, headers: { 'content-type': 'text/html; charset=utf-8' } } +20ms
  cypress:server:request successful response received { requestId: 'request33' } +0ms
  cypress:net-stubbing:server:intercept-response InterceptResponse { req: { url: '/runtime-error' }, request: undefined } +20ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +4ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +4ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:server:remote-states getting primary remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +0ms
  cypress:network:cors Parsed URL { port: '9009', protocol: 'http:', subdomain: null, domain: '', tld: 'localhost' } +1ms
  cypress:server:remote-states getting remote state: { auth: null, origin: 'http://localhost:9009', strategy: 'http', fileServer: null, domainName: 'localhost', props: { port: '9009', protocol: 'http:', domain: '', tld: 'localhost' } } for: http://localhost:9009 +1ms
  cypress:server:util:process_profiler current & mean memory and CPU usage by process group:
  cypress:server:util:process_profiler ┌─────────┬───────────────────┬──────────────┬─────────────────────────────────────────────────────────────┬────────────┬────────────────┬──────────┬──────────────┬─────────────┐
  cypress:server:util:process_profiler │ (index) │       group       │ processCount │                            pids                             │ cpuPercent │ meanCpuPercent │ memRssMb │ meanMemRssMb │ maxMemRssMb │
  cypress:server:util:process_profiler ├─────────┼───────────────────┼──────────────┼─────────────────────────────────────────────────────────────┼────────────┼────────────────┼──────────┼──────────────┼─────────────┤
  cypress:server:util:process_profiler │    0    │     'Firefox'     │      7       │ '46972, 47010, 47013, 47012, 47011, 47009 ... 1 more items' │    5.8     │      3.34      │  710.7   │    666.37    │    710.7    │
  cypress:server:util:process_profiler │    1    │     'plugin'      │      1       │                           '46935'                           │     0      │      1.14      │  163.84  │    162.67    │    222.8    │
  cypress:server:util:process_profiler │    2    │ 'electron-shared' │      2       │                       '46576, 46525'                        │     0      │      1.26      │  103.38  │    102.82    │   103.45    │
  cypress:server:util:process_profiler │    3    │     'cypress'     │      1       │                           '46513'                           │     0      │      1.94      │   2.71   │     2.58     │    2.81     │
  cypress:server:util:process_profiler │    4    │      'other'      │      2       │                       '47445, 47446'                        │     0      │      1.48      │   2.64   │    14.96     │   526.14    │
  cypress:server:util:process_profiler │    5    │    'launchpad'    │      1       │                           '46685'                           │     0      │      1.46      │   2.03   │      2       │    2.08     │
  cypress:server:util:process_profiler │    6    │      'TOTAL'      │      14      │                             '-'                             │    5.8     │      9.92      │  985.31  │    828.23    │   1006.91   │
  cypress:server:util:process_profiler └─────────┴───────────────────┴──────────────┴─────────────────────────────────────────────────────────────┴────────────┴────────────────┴──────────┴──────────────┴─────────────┘ +10s

Other

This might be related to the following issue https://github.com/cypress-io/cypress/issues/5660

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
myrjolacommented, Nov 4, 2022

Thank you for the workaround! I verified it works for me. The drawback is that it doesn’t simulate the way a user interacts with the element. Instead, the test interacts with the hidden HTML <select> element. Regardless, I think this is fine since we should have quite high confidence that the manual interactions work.

Haven’t looked into component testing yet, but thanks for the tip.

Closing this issue since there’s now a workaround.

0reactions
amehta265commented, Nov 3, 2022

@myrjola Upon further investigation looks like there happens to be some variability in the runtime between cypress open and cypress run. This may perhaps be leading to some rerendering so the <option> is gone by the time the cy.findByRole() runs. Or perhaps there may be an issue obtaining the hidden <select> using findByRole

I’d like to bring your attention to the Cypress Docs concerning testing on Select fields that give examples to particularly test <Select> fields and their corresponding <options>. I believe your Select.cy.ts spec file is a perfect candidate to use the APIs listed on the docs.

I tweaked your tests a little bit:

 it('should submit and react to changes', () => {
      // submit without change
      cy.findByText('buy').click();
      cy.findByText(/t-shirt size/).should('include.text', 'size M');

      // react to changes
      cy.contains(/choose a size/);
      cy.get('select').select('Small', {force: true}).should('have.value', 'S');
      cy.contains(/t-shirt size/).should('include.text', 'size S');
    });

This passes on the browser: Screenshot 2022-11-03 at 12 57 29 PM Passes in headless run mode: Screenshot 2022-11-03 at 12 58 46 PM

Further I was wondering if you have considered trying Component Testing, which was released in Cypress 10 to test your isolated Components e.g. Select, Dropdown, Context, Dialog Menu, e.t.c. This could be more suited towards your testing needs.

Kindly let me know if the solution works on your end.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Select - Radix UI
Select. Displays a list of options for the user to pick from—triggered by a button. Select a fruit… ... The component that pops...
Read more >
The event loop - JavaScript - MDN Web Docs - Mozilla
When foo returns, the top frame element is popped out of the stack (leaving only bar 's call frame). When bar returns, the...
Read more >
expect(received).tobeinthedocument() received value must be ...
React test unable to find an element mocked with jest ... This was a passing test using "@radix-ui/react-dropdown-menu": "0.1.4" .
Read more >
How To Select Radio Buttons In Selenium WebDriver?
A Radio button is nothing but a graphical element that controls the ... for selection of color and size is created and used...
Read more >
Safari Technology Preview Release Notes - Apple Developer
Ignored <option> element while building accessibility tree when <select> is hidden ... Test out API improvements including the ability to open a Safari...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Incorrect Configuration error with testIsolation setting when experimentalSessionAndOrigin is true

Next page

Tailwind hidden class but change on group-hover