webdriverio: [🐛 Bug]: move target out of bounds in chrome@107, wdio@8

Have you read the Contributing Guidelines on issues?

WebdriverIO Version

8.1.3

Node.js Version

16.16.0

Mode

Standalone Mode

Which capabilities are you using?

No response

What happened?

I got an error “move target out of bounds” when try to move cursor in left top corner of body for correct screen webview (without hover effect on any block). Before move cursor I called scrollIntoView and my test breaks.

What is your expected behavior?

I expected that this code will works the same as with wdio@7.

How to reproduce the bug.

Example of test:

const webdriverio = require('webdriverio');

(async () => {
    const browser = await webdriverio.remote({
        protocol: 'http',
        hostname: 'localhost',
        path: '/',
        port: 4444,
        automationProtocol: 'webdriver',
        logLevel: 'trace',
        connectionRetryCount: 0,
        capabilities: {
            browserName: 'chrome',
            browserVersion: '107.0',
        }
    });

    await browser.url('https://wikipedia.org');

    const body = await browser.$('body');

    await body.scrollIntoView();
    await body.moveTo({xOffset: 0, yOffset: 0});
})();

Relevant log output

❯❯❯ node wdio-test.js                                                                                                                                                                                                         ✘ 1
2023-01-18T13:08:17.960Z INFO webdriver: Initiate new session using the WebDriver protocol
2023-01-18T13:08:18.087Z INFO webdriver: [POST] http://localhost:4444/session
2023-01-18T13:08:18.087Z INFO webdriver: DATA {
  capabilities: {
    alwaysMatch: { browserName: 'chrome', browserVersion: '107.0' },
    firstMatch: [ {} ]
  },
  desiredCapabilities: { browserName: 'chrome', browserVersion: '107.0' }
}
2023-01-18T13:08:18.396Z INFO webdriver: COMMAND navigateTo("https://wikipedia.org/")
2023-01-18T13:08:18.397Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/url
2023-01-18T13:08:18.397Z INFO webdriver: DATA { url: 'https://wikipedia.org/' }
2023-01-18T13:08:19.040Z INFO webdriver: RESULT null
2023-01-18T13:08:19.042Z INFO webdriver: COMMAND findElement("css selector", "body")
2023-01-18T13:08:19.043Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/element
2023-01-18T13:08:19.043Z INFO webdriver: DATA { using: 'css selector', value: 'body' }
2023-01-18T13:08:19.096Z INFO webdriver: RESULT {
  'element-6066-11e4-a52e-4f735466cecf': 'de1c52ef-2444-44a0-a0d3-abaf64686eea'
}
2023-01-18T13:08:19.103Z INFO webdriver: COMMAND findElement("css selector", "html")
2023-01-18T13:08:19.103Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/element
2023-01-18T13:08:19.103Z INFO webdriver: DATA { using: 'css selector', value: 'html' }
2023-01-18T13:08:19.154Z INFO webdriver: RESULT {
  'element-6066-11e4-a52e-4f735466cecf': '8f856b2b-0485-4318-bad4-0ec682f4d6d2'
}
2023-01-18T13:08:19.157Z INFO webdriver: COMMAND getElementRect("8f856b2b-0485-4318-bad4-0ec682f4d6d2")
2023-01-18T13:08:19.158Z INFO webdriver: [GET] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/element/8f856b2b-0485-4318-bad4-0ec682f4d6d2/rect
2023-01-18T13:08:19.205Z INFO webdriver: RESULT { height: 1145, width: 922, x: 0, y: 0 }
2023-01-18T13:08:19.206Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
2023-01-18T13:08:19.207Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/execute/sync
2023-01-18T13:08:19.207Z INFO webdriver: DATA {
  script: 'return (function (el) {\n' +
    '            if (!el || !el.getBoundingClientRect) {\n' +
    '                return;\n' +
    '            }\n' +
    '            const { left, top, width, height } = el.getBoundingClientRect();\n' +
    '            return {\n' +
    '                x: left + this.scrollX,\n' +
    '                y: top + this.scrollY,\n' +
    '                width,\n' +
    '                height\n' +
    '            };\n' +
    '        }).apply(null, arguments)',
  args: [
    {
      'element-6066-11e4-a52e-4f735466cecf': '8f856b2b-0485-4318-bad4-0ec682f4d6d2',
      ELEMENT: '8f856b2b-0485-4318-bad4-0ec682f4d6d2'
    }
  ]
}
2023-01-18T13:08:19.255Z INFO webdriver: RESULT { height: 1144.671875, width: 922, x: 0, y: 0 }
2023-01-18T13:08:19.256Z INFO webdriver: COMMAND getElementRect("de1c52ef-2444-44a0-a0d3-abaf64686eea")
2023-01-18T13:08:19.256Z INFO webdriver: [GET] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/element/de1c52ef-2444-44a0-a0d3-abaf64686eea/rect
2023-01-18T13:08:19.302Z INFO webdriver: RESULT { height: 1089, width: 922, x: 0, y: 40 }
2023-01-18T13:08:19.302Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
2023-01-18T13:08:19.303Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/execute/sync
2023-01-18T13:08:19.303Z INFO webdriver: DATA {
  script: 'return (function (el) {\n' +
    '            if (!el || !el.getBoundingClientRect) {\n' +
    '                return;\n' +
    '            }\n' +
    '            const { left, top, width, height } = el.getBoundingClientRect();\n' +
    '            return {\n' +
    '                x: left + this.scrollX,\n' +
    '                y: top + this.scrollY,\n' +
    '                width,\n' +
    '                height\n' +
    '            };\n' +
    '        }).apply(null, arguments)',
  args: [
    {
      'element-6066-11e4-a52e-4f735466cecf': 'de1c52ef-2444-44a0-a0d3-abaf64686eea',
      ELEMENT: 'de1c52ef-2444-44a0-a0d3-abaf64686eea'
    }
  ]
}
2023-01-18T13:08:19.347Z INFO webdriver: RESULT { height: 1088.671875, width: 922, x: 0, y: 40 }
2023-01-18T13:08:19.347Z INFO webdriver: COMMAND performActions(<object>)
2023-01-18T13:08:19.348Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/actions
2023-01-18T13:08:19.348Z INFO webdriver: DATA {
  actions: [
    { id: 'action1', type: 'wheel', parameters: {}, actions: [Array] }
  ]
}
2023-01-18T13:08:19.598Z INFO webdriver: RESULT null
2023-01-18T13:08:19.599Z INFO webdriver: COMMAND releaseActions()
2023-01-18T13:08:19.599Z INFO webdriver: [DELETE] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/actions
2023-01-18T13:08:19.642Z INFO webdriver: RESULT null
2023-01-18T13:08:19.642Z INFO webdriver: COMMAND getElementRect("de1c52ef-2444-44a0-a0d3-abaf64686eea")
2023-01-18T13:08:19.643Z INFO webdriver: [GET] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/element/de1c52ef-2444-44a0-a0d3-abaf64686eea/rect
2023-01-18T13:08:19.688Z INFO webdriver: RESULT { height: 1089, width: 922, x: 0, y: 40 }
2023-01-18T13:08:19.689Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
2023-01-18T13:08:19.689Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/execute/sync
2023-01-18T13:08:19.689Z INFO webdriver: DATA {
  script: 'return (function (el) {\n' +
    '            if (!el || !el.getBoundingClientRect) {\n' +
    '                return;\n' +
    '            }\n' +
    '            const { left, top, width, height } = el.getBoundingClientRect();\n' +
    '            return {\n' +
    '                x: left + this.scrollX,\n' +
    '                y: top + this.scrollY,\n' +
    '                width,\n' +
    '                height\n' +
    '            };\n' +
    '        }).apply(null, arguments)',
  args: [
    {
      'element-6066-11e4-a52e-4f735466cecf': 'de1c52ef-2444-44a0-a0d3-abaf64686eea',
      ELEMENT: 'de1c52ef-2444-44a0-a0d3-abaf64686eea'
    }
  ]
}
2023-01-18T13:08:19.747Z INFO webdriver: RESULT { height: 1088.671875, width: 922, x: 0, y: 40 }
2023-01-18T13:08:19.747Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
2023-01-18T13:08:19.747Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/execute/sync
2023-01-18T13:08:19.748Z INFO webdriver: DATA {
  script: 'return (function () {\n' +
    '        return { scrollX: this.pageXOffset, scrollY: this.pageYOffset };\n' +
    '    }).apply(null, arguments)',
  args: []
}
2023-01-18T13:08:19.792Z INFO webdriver: RESULT { scrollX: 0, scrollY: 56 }
2023-01-18T13:08:19.793Z INFO webdriver: COMMAND performActions(<object>)
2023-01-18T13:08:19.793Z INFO webdriver: [POST] http://localhost:4444/session/9fd10be363ec038d8f265fcca2bd04b7/actions
2023-01-18T13:08:19.793Z INFO webdriver: DATA {
  actions: [
    {
      id: 'action2',
      type: 'pointer',
      parameters: [Object],
      actions: [Array]
    }
  ]
}
2023-01-18T13:08:19.843Z DEBUG webdriver: request failed due to response error: move target out of bounds
2023-01-18T13:08:19.843Z ERROR webdriver: Request failed with status 500 due to move target out of bounds: move target out of bounds
  (Session info: chrome=107.0.5304.87)
file:///my_project/node_modules/webdriver/build/utils.js:194
    return new CustomRequestError(body, requestOptions);
           ^

move target out of bounds: move target out of bounds
  (Session info: chrome=107.0.5304.87)
    at getErrorFromResponseBody (file:///my_project/node_modules/webdriver/build/utils.js:194:12)
    at NodeJSRequest._request (file:///my_project/node_modules/webdriver/build/request/index.js:164:23)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Browser.wrapCommandFn (file:///my_project/node_modules/webdriverio/node_modules/@wdio/utils/build/shim.js:72:29)
    at async PointerAction.perform (file:///my_project/node_modules/webdriverio/build/utils/actions/base.js:61:9)
    at async Element.wrapCommandFn (file:///my_project/node_modules/webdriverio/node_modules/@wdio/utils/build/shim.js:72:29)
    at async Element.elementErrorHandlerCallbackFn (file:///my_project/node_modules/webdriverio/build/middlewares.js:18:32)
    at async Element.wrapCommandFn (file:///my_project/node_modules/webdriverio/node_modules/@wdio/utils/build/shim.js:72:29)
    at async /my_project/wdio-test.js:23:5



### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

### Is there an existing issue for this?

- [X] I have searched the existing issues

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 15 (15 by maintainers)

Most upvoted comments

why we don’t use simple scrollIntoViewWeb here Because this would use web APIs on which we can’t rely on given we never know the environment the test is executed in. The WebDriver action API is well defined and works across browser so there is no reason not to use it.

To be honest, it is very strange. We have created a command related to elements which refers to browser-specific things. I mean, we refer to MDN in command docs, which is definitely web-specific, and then try to adopt and behave for all driver backends, which is not possible. We probably have to remove or deprecate it instead of attempting to make it work on platforms that cannot do so. I mean we can’t make it work for Appium Android as well as the Web spec from MDN.

+1
BorisOsipov on Feb 15, 2023
Read more comments on GitHub
← webdriverio: [🐛 Bug]: isExisting calls findElements (multiple), a potentially expensive op
webdriverio: [🐛 Bug]: reportedEnvironmentVars not working →