realSwipe - coordinate does not take cypress scaling (or zoom) into consideration

[amoshydra]

Expected

Given swipe with length 200px, it should perform a swipe with 200px on the viewport regardless of browser's zoom or cypress scaling.

cy
  .get("body")
  .realSwipe("toRight", {
    length: 200,
  })

Current

In 100% zoom, realSwipe triggers a swipe with length 200px (expected) In 50% zoom, realSwipe triggers a swipe with length ~400px (unexpected)

100%	50%
99.98 --> 300.20 = distance 200.22	89.90 --> 504.04 = distance 414.14

Reproduce

Perform a swipe with 200px and observe the distance travelled in 100% zoom and 50% zoom.

Notice in the screenshots below, realSwipe 200px produces the same dots pattern in both 100% and 50%. A shorter dots pattern is expected in 50% zoom.

100%	50%	diff

Reproduce repo: https://github.com/amoshydra/repro-dmtrKovalenko-cypress-real-events-i-swipes/tree/real-swipe-with-different-zoomed

Additional note

Possibility related to #10

[beenham]

Hi @amoshydra, I was seeing this issue too I found a workaround for using cypress run, add the following launch options to your cypress config and ensure the window size is great than the viewport size of the tests Not ideal, but if you are running in CI or anything like that, it will consistently pass.

export default defineConfig({
  component: {
    setupNodeEvents: (on: PluginEvents) => {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.name === 'chrome' && browser.isHeadless) {
          launchOptions.args.push('--window-size=2560,1440');
          launchOptions.args.push('--force-device-scale-factor=1');
        }

        if (browser.name === 'electron' && browser.isHeadless) {
          launchOptions.preferences.width = 2560;
          launchOptions.preferences.height = 1440;
        }

        if (browser.name === 'firefox' && browser.isHeadless) {
          launchOptions.args.push('--width=2560');
          launchOptions.args.push('--height=1440');
        }

        return launchOptions;
      });
    },
  },