DevExpress / DevExpress/testcafe

Testcafe throws js error for latest datatable.js library

Open
#8,464 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

TYPE: bug
Dominant language
JavaScript
Stars
9.9k
Forks
676
PR merge metrics
No merged PRs in 30d

Description

What is your Scenario?

I cannot interact with a page with table from latest datatables.js library- js error occurs and application is innoperable

What is the Current behavior?

I open the page with table and cannot interact with it because of error

What is the Expected behavior?

there should be no js error on datatable load

What is the public URL of the test page? (attach your complete example)

all you need to do is run this test with latest testcafe (regardless browser)

import {Selector, t} from "testcafe";

fixture('Test fixture')
test('Datatables.js throw error due to hammerhead', async () => {
await t.navigateTo('https://datatables.net/examples/data_sources/js_array.html');
const errors = (await t.getBrowserConsoleMessages()).error
await t.expect(errors.length).eql(0)
})

What is your TestCafe test code?

import {Selector, t} from "testcafe";

fixture('Test fixture')
test('Datatables.js throw error due to hammerhead', async () => {
await t.navigateTo('https://datatables.net/examples/data_sources/js_array.html');
const errors = (await t.getBrowserConsoleMessages()).error
await t.expect(errors.length).eql(0)
})

Your complete configuration file

no configuration file

Your complete test report

Test fixture
✖ Datatables.js throw error due to hammerhead

  1. A JavaScript error occurred on "https://datatables.net/examples/data_sources/js_array.html".
    Repeat test actions in the browser and check the console for errors.
    Enable the “skipJsErrors” option to ignore JavaScript errors during test execution. Learn more: "https://testcafe.io/documentation/404038/recipes/debugging/skip-javascript-errors"
    If the website only throws this error when you test it with TestCafe, please create a new issue at:
    "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".

    JavaScript error details:
    TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')
        at https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:14:17630
        at re (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:14:18123)
        at Me (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:14:36841)
        at n (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:14:36596)
        at qe (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:14:36729)
        at HTMLTableElement. (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:14:7269)
        at T.each (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:5:3034)
        at T.each (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:5:1532)
        at T.W [as dataTable] (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:14:1418)
        at T.DataTable (https://datatables.net/media/js/site.js?_=10643735a963d61266841f4ca76196ce:14:98161)

    Browser: Chrome 142.0.0.0 / Ubuntu 22.04

    1 |import {Selector, t} from "testcafe";
    2 |
    3 |
    4 |fixture('Test fixture')
    5 |test('Datatables.js throw error due to hammerhead', async () => {

    6 | await t.navigateTo('https://datatables.net/examples/data_sources/js_array.html');
    7 | const errors = (await t.getBrowserConsoleMessages()).error
    8 | await t.expect(errors.length).eql(0)
    9 |})

    at (/home/asia/testcafeExample/example.js:6:13)
    at asyncGeneratorStep (/home/asia/testcafeExample/example.js:1:38)
    at _next (/home/asia/testcafeExample/example.js:1:38)
    at (/home/asia/testcafeExample/example.js:1:38)
    at (/home/asia/testcafeExample/example.js:1:38)

1/1 failed (5s)

Screenshots
Image Image
Steps to Reproduce

1.create simple node project with latest testcafe
2.run the test that i attached above
3.

TestCafe version

3.7.2

Node.js version

21.7.1

Command-line arguments

testcafe chrome example.js

Browser name(s) and version(s)

Firefox 135, CHrome142

Platform(s) and version(s)

Linux, Mac, Windows

Other

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the provided TestCafe test against the DataTables example URL and inspect the reported getBoundingClientRect error in the browser console. Trace the failure into TestCafe's browser-side handling, then verify that the test completes with no JavaScript errors in Chrome and Firefox.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.