clicking on SVG elements in IE11 sometimes breaks in TestCafe 1.4.2+

[kyle-johnson]

This might be related to #4416

The core of the issue is this line, introduced in TestCafe 1.4.2:
https://github.com/DevExpress/testcafe/pull/3902/files#diff-74fd963d00e947790f5a2095dbef5ac5R79

const elementUnderCursorContainsTarget = !!currentElement && this.element.contains(currentElement);

IE11 does not support .contains on <svg> elements.

What is your Test Scenario?

I click a non-SVG element, then click an SVG element in IE 11.

I have isolated this to a minimal example below.

What is the Current behavior?

On TestCafe 1.4.2, an error is thrown. On 1.4.1 and below, the click succeeds.

On TestCafe 1.8.1 the test just hangs.

What is the Expected behavior?

The click should succeed, as with TestCafe 1.4.1.

What is your web application and your TestCafe test code?

Your website URL (or attach your complete example):

http://www.tinyepic.com/svg.html

Your complete test code (or attach your test files):

 import { Selector } from "testcafe";

fixture("SVG Click Test").beforeEach(async (t) => {
  await t.navigateTo(`http://www.tinyepic.com/svg.html`);
});

test("Clicks", async (t) => {
  await t.expect(Selector("#clickable").withText("Clickable").exists).ok();

  // we have to click on another element first, to force the mouse to be moved for the second click
  await t.click(Selector("#clickable"));

  await t.expect(Selector("#clickable").withText("Clicked!").exists).ok();

  await t.expect(Selector("#svgStatus").withText("SVG has not been clicked").exists).ok();

  try {
    await t.click(Selector("#notClickable"));
  } catch (error) {
    console.log(error);
  }

  await t.expect(Selector("#svgStatus").withText("SVG has been clicked!").exists).ok();
});

Your complete test report:

 Running tests in:
 - IE 11.0.0 / Windows 10.0.0

 SVG Click Test
{
  description: "Object doesn't support property or method 'contains'",
  number: -2146827850,
  stack: "TypeError: Object doesn't support property or method 'contains'\n" +
    '   at Anonymous function (http://192.168.1.160:58551/testcafe-automation.js:1:92707)\n' +
    '   at a (http://192.168.1.160:58551/hammerhead.js:5:10324)\n' +
    '   at d (http://192.168.1.160:58551/hammerhead.js:5:10888)\n' +
    '   at p (http://192.168.1.160:58551/hammerhead.js:5:10940)\n' +
    '   at n (http://192.168.1.160:58551/hammerhead.js:5:10068)',
  callsite: CallsiteRecord {
    filename: '/Users/kylejohnson/Demeter/node/frontend/testcafe/svg.js',
    lineNum: 16,
    callsiteFrameIdx: 6,
    stackFrames: [
      [CallSite], [CallSite],
      [CallSite], [CallSite],
      [CallSite], [CallSite],
      [CallSite], CallSite {},
      [CallSite], [CallSite],
      [CallSite], [CallSite]
    ],
    isV8Frames: true
  }
}
 ✖ Clicks

   1) Uncaught object "[object Object]" was thrown. Throw Error instead.

      Browser: IE 11.0.0 / Windows 10.0.0



 1/1 failed (16s)
error Command failed with exit code 1.

Steps to Reproduce:

Run the TestCafe test. No setup required. It works on 1.4.1. It fails (see error above) on 1.4.2 and fails on the latest 1.8.1 as well

Your Environment details:

• testcafe version: 1.4.2 / 1.8.1
• node.js version: 1.12.13
• browser name and version: IE 11
• platform and version: Windows 10, 8.1., 8

[alexey-lin]

Thank you for your report. I reproduced the issue. We'll look into it and update this thread once we have any result.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.