如何重置使用 ClientFunction 检索到的 DOM 元素的 scrollHeight 值
How to reset the scrollHeight values on DOM elements retrieved using ClientFunction
我在两个单独的测试中使用 TestCafe 运行ning 类,在两个单独的装置中,在两个单独的测试中,测试两个不同的应用程序页面。
我注意到,在这些测试中,当我通过 ClientFunction
询问 window.document
对象时,根据 运行ning 顺序,我得到不同的值。
例如
mytest1.js
import { Selector, ClientFunction } from 'testcafe';
fixture `Homepage`
.page `http://mypage.com`;
test('Test 1', async t => {
const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
console.log(await getBodyHeight()) // 800px
});
mytest2.js
import { Selector, ClientFunction } from 'testcafe';
fixture `Dashboard`
.page `http://mypage.com/dashboard`;
test('Test 2', async t => {
const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
console.log(await getBodyHeight()) // 1200px
});
如果我 运行 这些使用 npm run testcafe -- firefox:headless mytest*.js
并且顺序是从小高度到大高度,控制台将记录:
...
800
...
1200
然而,如果我 运行 这些相反的方式(较大的高度到较小的高度),我得到:
...
1200
...
1200
好像 document.body
被拉伸到最大值而不是 return。
有没有办法使用 ClientFunction(..)
或其他一些方法来正确重置这些值?
这个 ClientFunction(() => window.document.body.scrollHeight)
的测试场景看起来是正确的。我准备了一个小例子,我无法重现这种行为。以下示例是否按您的预期工作?
index1.html
<html>
<head></head>
<body>
</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test
</html>
index2.html
<html>
<head></head>
<body>
</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test
</html>
test1.js
import { Selector, ClientFunction } from 'testcafe';
fixture `My Fixture`
.page `./index1.html`;
test('test 1', async (t) => {
const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
console.log('test 1 body.scrollHeight', await getBodyHeight());
});
test2.js
import { Selector, ClientFunction } from 'testcafe';
fixture `My Fixture`
.page `./index2.html`;
test('test 2', async (t) => {
const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
console.log('test 2 body.scrollHeight', await getBodyHeight());
});
结果:
testcafe "firefox:headless" tests/test1.js tests/test2.js
My Fixture
test 1 body.scrollHeight 932
√ test 1
My Fixture
test 2 body.scrollHeight 1762
√ test 2
2 passed (0s)
testcafe "firefox:headless" tests/test2.js tests/test1.js
My Fixture
test 2 body.scrollHeight 1762
√ test 2
My Fixture
test 1 body.scrollHeight 932
√ test 1
2 passed (0s)
我在两个单独的测试中使用 TestCafe 运行ning 类,在两个单独的装置中,在两个单独的测试中,测试两个不同的应用程序页面。
我注意到,在这些测试中,当我通过 ClientFunction
询问 window.document
对象时,根据 运行ning 顺序,我得到不同的值。
例如 mytest1.js
import { Selector, ClientFunction } from 'testcafe';
fixture `Homepage`
.page `http://mypage.com`;
test('Test 1', async t => {
const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
console.log(await getBodyHeight()) // 800px
});
mytest2.js
import { Selector, ClientFunction } from 'testcafe';
fixture `Dashboard`
.page `http://mypage.com/dashboard`;
test('Test 2', async t => {
const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
console.log(await getBodyHeight()) // 1200px
});
如果我 运行 这些使用 npm run testcafe -- firefox:headless mytest*.js
并且顺序是从小高度到大高度,控制台将记录:
...
800
...
1200
然而,如果我 运行 这些相反的方式(较大的高度到较小的高度),我得到:
...
1200
...
1200
好像 document.body
被拉伸到最大值而不是 return。
有没有办法使用 ClientFunction(..)
或其他一些方法来正确重置这些值?
这个 ClientFunction(() => window.document.body.scrollHeight)
的测试场景看起来是正确的。我准备了一个小例子,我无法重现这种行为。以下示例是否按您的预期工作?
index1.html
<html>
<head></head>
<body>
</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test
</html>
index2.html
<html>
<head></head>
<body>
</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test
</html>
test1.js
import { Selector, ClientFunction } from 'testcafe';
fixture `My Fixture`
.page `./index1.html`;
test('test 1', async (t) => {
const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
console.log('test 1 body.scrollHeight', await getBodyHeight());
});
test2.js
import { Selector, ClientFunction } from 'testcafe';
fixture `My Fixture`
.page `./index2.html`;
test('test 2', async (t) => {
const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
console.log('test 2 body.scrollHeight', await getBodyHeight());
});
结果:
testcafe "firefox:headless" tests/test1.js tests/test2.js
My Fixture
test 1 body.scrollHeight 932
√ test 1
My Fixture
test 2 body.scrollHeight 1762
√ test 2
2 passed (0s)
testcafe "firefox:headless" tests/test2.js tests/test1.js
My Fixture
test 2 body.scrollHeight 1762
√ test 2
My Fixture
test 1 body.scrollHeight 932
√ test 1
2 passed (0s)