cypress-io
Chrome blink pointer type flag not working since version 13.14.0
Current behavior
A few months ago, we updated MUI and started using the Date Picker component, which caused certain Cypress tests to fail in Chrome headless mode while they worked correctly in headed mode. Upon investigation, we discovered that the behavior of our React app in Chrome headless mode differs from headed mode, for some reason behaving like a mobile device. This causes the Date Picker field to trigger the mobile widget when attempting to enter a value.
To address this issue, we found a workaround using a flag in the before:browser:launch hook, which involved pushing an argument in the setupNodeEvents:
on('before:browser:launch', (browser, launchOptions) => {
if (browser.family === 'chromium' && browser.name !== 'electron') {
// This is added for datepickers to behave like desktop in headless mode, and not change to mobile
launchOptions.args.push('--blink-settings=primaryPointerType=4');
}
return launchOptions;
});
Here where I found the workaround for the headless chrome issue: https://github.com/microsoft/playwright/issues/7769
This workaround was effective with an earlier version of Cypress, specifically 13.13.1.
However, this week I attempted to update Cypress and noticed that since version 13.14.0, the flag no longer applies, and the tests fail again due to the same problem described above.
I already checked this:
- Cypress changelog does not seems to include / change something related to how flags are handled.
- I verified that the issue is not related to our web application, as it is reproducible on the example datepicker web page.
- I reviewed the default flags passed to Chrome in Cypress, and there are no changes between versions 13.13.1 and 13.14.0.
- I tried to implement a different workaround, by forcing the user-agent, viewport, and other settings, but the behavior remains as a mobile device in headless mode, and the flag that previously worked still does not apply even in the latest Cypress version.
Desired behavior
The flag --blink-settings=primaryPointerType=4 should apply correctly in Chrome headless mode, ensuring that the Date Picker field behaves as it does in headed mode, without triggering the mobile widget.
Test code to reproduce
You will notice that the flag applies correctly in Cypress v13.13.1 and other 13.13.X versions, but it stops working starting from version 13.14.0, causing the DatePickerExample.spec.js test to fail.
cypress.config.cjs
const { defineConfig } = require('cypress');
module.exports = defineConfig({
chromeWebSecurity: false,
defaultCommandTimeout: 5000,
video: true,
videoCompression: true,
e2e: {
supportFile: './cypress/support/index.js',
setupNodeEvents(on, config) {
on('before:browser:launch', (browser = {}, launchOptions) => {
if (browser.family === 'chromium' && browser.name !== 'electron') {
// This is added for datepickers to behave like desktop in headless mode, and not change to mobile
launchOptions.args.push('--blink-settings=primaryPointerType=4');
}
return launchOptions;
});
return config;
},
specPattern: '../../../../*/!(node_modules)/*/src-test/**/*.spec.js',
fixturesFolder: '.'
}
});
DatePickerExample.spec.js
import '../../support';
describe('Date Picker Exampletests', () => {
describe('Usual flows for delivery modes options for lines', () => {
it('introduces a value in the Date Picker', function exampleT1() {
cy.visit(
'https://mui.com/x/react-date-pickers/date-picker/?srsltid=AfmBOor_uOXxk5HtykFVTdS4S_xd30gJVXQ_eKE9xg9sLmd9IMFC1SBP'
);
// The Date Picker behavior differs depending on whether the test is run in headless mode or headed mode.
cy.get('input')
.first()
.click();
cy.get('input')
.first()
.type('12022025');
});
Cypress Version
13.14.0
Node version
18.20.6
Operating System
Ubuntu 22.04.5 LTS
Debug Logs
Other
Chrome version: 129 / 134
Here a screenshot when running in headless mode:
npx cypress run --spec "path/to/spec" -b chrome
@Andre-ob What is this call to addLaunchArgs in the configuration file? Because we don't currently have support for calling multiple 'on' definitions on the save event. See this issue: https://github.com/cypress-io/cypress/issues/5240
@jennifer-shehane My apologies, I forgot to remove the addLaunchArgs function, which encapsulates the on definition to use the launchOptions.args.push() in my real code instead using it directly.
For this issue, I wanted to simplify the example by avoiding the function creation as it does not give any value to the real problem.
To clarify, I am removing the custom function from the configuration file in the description to make the example more straightforward and avoid misunderstandings.
This seems to still be a problem. We have a strange case where we're testing some component from Material UI, which in headless mode it behaves like a mobile/touch device. The solution to it is adding the mentioned flag for the chrome instance launched by cypress.
However, in version 13.14 it doesn't work anymore, any reason why it stopped being applied?
we face the same issue since updating from 13.6.6 to 14.2.1 I extended the config to:
on("before:browser:launch", (browser, launchOptions) => {
if (browser.family === "chromium") {
launchOptions.args.push("--headless=chrome");
launchOptions.args.push("--blink-settings=primaryPointerType=4");
launchOptions.args.push("--disable-blink-features=AutomationControlled");
}
return launchOptions;
});
but without success. I use the DesktopDatePicker as a workaround, but a working generic solution would be appreciated.
@jennifer-shehane Any updates on this issue?
It seems that Cypress's handling of the --blink-settings=primaryPointerType=4 flag changed between versions 13.13.3 and 13.14.0, but there are no related changes listed in the backlog.
I am facing the same issue. @jennifer-shehane you already received the response here but the "Potential fix was proposed; awaiting response" label is still present. You should consider removing that label.
