Блог

Главная - Вопросы по программированию - Как сбросить значения высоты прокрутки для элементов DOM, полученных с помощью ClientFunction

Как сбросить значения высоты прокрутки для элементов DOM, полученных с помощью ClientFunction

#javascript #automated-tests #e2e-testing #web-testing #testcafe

#javascript #автоматизированные тесты #e2e-тестирование #веб-тестирование #testcafe

Вопрос:

У меня есть TestCafe, работающий в двух отдельных тестовых классах, в двух отдельных устройствах, в двух отдельных тестах, тестирующих две разные страницы приложения.

Я замечаю, что когда я опрашиваю window.document объект через ClientFunction в этих тестах, в зависимости от порядка выполнения, я получаю разные значения.

например 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 растягивается до максимального значения и не возвращается.

Есть ли способ, используя ClientFunction(..) или, возможно, какие-либо другие средства, правильно сбросить эти значения?

Ответ №1:

Этот тестовый сценарий с 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());
});

Результаты:

  1. 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)
  1. 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)

Смотрите также: Объект ClientFunction

Комментарии:

1. да, это работает. Затем я подумал, что это проблема с SPA (которую мы используем create-react-app ), но, похоже, она также работает нормально: разочарованный: … моя точная проблема связана с производственным веб-приложением, созданным поверх библиотеки внутренних компонентов, поэтому я думаю, что вполне возможно, что один из компонентов библиотеки не сбрасывает тело, а не testcafe