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;
      });
    },
  },

[sternma]

From an initial look, there seems to be some obvious first steps here:

• Create or use a utility to detect page zoom level (assuming we don't want the user to have to enter this as an arg every time)
• Adjust the step and/or length provided to or defaulted to in realSwipe.ts by the zoomLevel to behave appropriately.

This seems bad though, because then the length and step potentially provided by the user or inferred by the user to be the typical default will not be what is actually used in the realSwipe action. However, we can add an optional adjustForZoom boolean arg to realSwipe, defaulted to false, which should maintain backwards compatibility.

@dmtrKovalenko , any thoughts before I give this a stab?

[dmtrKovalenko]

If you will manage to implement it — it would be amazing for every utility we have. As of coordinates are always wrong when zooming