feat: wait page load #778

KuznetsovRoman · 2023-07-19T23:46:02Z

Что сделано

Добавил метод openAndWait:

Открыть страницу
Подождать появления селекторов
Подождать предикат
Подождать неактивности сети
Кинуть ошибку при ошибке загрузки ресурса

KuznetsovRoman · 2023-07-20T08:41:42Z

src/browser/commands/openAndWait.ts

+            timeout = openAndWaitOpts?.timeout || config?.pageLoadTimeout,
+        }: WaitOpts = {},
+    ): Promise<string | void> {
+        waitNetworkIdle &&= isChrome || isCDP;


Отключаем waitNetworkIdle, если использование CDP Interceptor невозможно

KuznetsovRoman · 2023-07-20T08:42:23Z

src/browser/commands/openAndWait.ts

+        if (!uri || uri === emptyPageUrl) {
+            return session.url(uri);
+        }


На пустых страницах не нужно ничего ждать.

KuznetsovRoman · 2023-07-20T08:43:23Z

src/browser/commands/openAndWait.ts

+            return session.url(uri);
+        }
+
+        const selectors = typeof selector === "string" ? [selector] : selector;


typeof вместо _.isString, чтобы у selectors правильно вывелся тип: string[]

KuznetsovRoman · 2023-07-20T08:43:42Z

src/browser/commands/openAndWait.ts

+
+        const selectors = typeof selector === "string" ? [selector] : selector;
+
+        const pageLoader = new PageLoader(session, {


Основная логика сосредоточена в этом классе

KuznetsovRoman · 2023-07-20T08:47:43Z

src/browser/commands/openAndWait.ts

+                    return;
+                }
+
+                const shouldIgnore = isMatchPatterns(openAndWaitOpts?.ignoreNetworkErrorsPatterns, match.url);


Помимо shouldThrowError, добавил ignoreNetworkErrorPatterns: чтобы удобно было игнорировать всякие ошибки запросов к счетчикам, которые браузер считает картинками

KuznetsovRoman · 2023-07-20T08:49:41Z

src/browser/commands/openAndWait.ts

+            });
+
+            pageLoader.load(() => session.url(uri)).then(checkLoaded);
+        }).finally(() => pageLoader.unsubscribe());


очищаем mock после выполнения команды. Так puppeteer работает стабильнее, немного быстрее, не утекает память.

KuznetsovRoman · 2023-07-20T08:51:04Z

src/config/browser-options.js

@@ -240,6 +240,16 @@ function buildBrowserOptions(defaultFactory, extra) {
            },
        }),

+        openAndWaitOpts: option({


Возможность указать дефолты через конфиг. Например, чтобы были единые таймауты, плюс тут удобно указать игнорируемые паттерны метрики

KuznetsovRoman · 2023-07-20T08:53:01Z

src/utils/page-loader.ts

+    }
+
+    public async load(goToPage: () => Promise<string | void>): Promise<void> {
+        await this.initMock();


Начинаем слушать сеть до загрузки страницы

KuznetsovRoman · 2023-07-20T08:56:23Z

src/utils/page-loader.ts

+        this.launchSelectorsPromise();
+        this.launchPredicatePromise();
+        this.launchNetworkPromise();


после загрузки страницы, параллельно запускаем три промиса с единым таймаутом:

selectorsPromise: ждет появления всех селекторов, по таймауту кидает ошибку

predicatePromise: ждет истинности предиката, по таймауту кидает ошибку

networkPromise: нужен для того, чтобы по таймауту кинуть ошибку (либо заэмиттить эвент о том, что сеть уже неактивна, если никаких запросов и не было)

KuznetsovRoman · 2023-07-20T08:57:17Z

src/utils/page-loader.ts

+            const element = await this.session.$(selector);
+            await element.waitForExist({ timeout: this.timeout });


Запись в две строчки вместо чейнинга упрощает тестирование

KuznetsovRoman · 2023-07-20T09:01:00Z

src/utils/page-loader.ts

+        this.mock = await this.session.mock("**").catch(() => {
+            logger.warn(`PageLoader: Could not create CDP interceptor`);
+
+            return null;
+        });


На практике такого не встречал, но если не удастся создать CDP interceptor, то падение теста по этой причине принесет больше проблем, чем пользы, поэтому если не удалось, игнорируем

KuznetsovRoman · 2023-07-20T09:02:51Z

src/utils/page-loader.ts

+        let pendingRequests = 0;
+        let pendingIdleTimeout: NodeJS.Timeout;
+        this.mock.on("request", () => {
+            this.totalRequests++;


Счетчик полного количества запросов нужен, чтобы по networkIdleTimeout обозначить, что сеть пассивная, если ни одного запроса так и не было (launchNetworkPromise)

KuznetsovRoman · 2023-07-20T09:03:45Z

src/utils/page-loader.ts

+    private mock?: Mock | null;
+    private selectors: string[];
+    private predicate?: () => boolean | Promise<boolean>;
+    private timeout: number;


Сколько мы готовы потратить времени на итоговую прогрузку страницы (селекторы, предикат, неактивность сети)

KuznetsovRoman · 2023-07-20T09:04:19Z

src/utils/page-loader.ts

+    private predicate?: () => boolean | Promise<boolean>;
+    private timeout: number;
+    private waitNetworkIdle: boolean;
+    private waitNetworkIdleTimeout: number;


спустя какое время отсутствия запросов считать, что страница прогрузилась

KuznetsovRoman · 2023-07-20T09:05:28Z

test/src/browser/commands/openAndWait.ts

+type SessionOrigin = ReturnType<typeof mkSessionStubOrigin_>;
+type Session = SessionOrigin & { openAndWait(uri: string, opts: Record<string, unknown>): Promise<void> };
+
+const mkSessionStub_ = (): Session => {
+    return mkSessionStubOrigin_() as Session;
+};


Создаем правильно типизированный mkSessionStub_, у которого есть метод openAndWait

KuznetsovRoman · 2023-07-20T09:06:36Z

test/src/browser/commands/openAndWait.ts

+        sandbox.restore();
+    });
+
+    const mkPromiseCheck_ =


функция-конструктор проверок ниже: resolvedAfter_, rejectedAfter_, notResolvedAfter_, notRejectedAfer_

KuznetsovRoman · 2023-07-20T09:09:18Z

test/src/utils/page-loader.ts

+    restore: SinonStub;
+};
+
+const waitUntilMock = (condition: () => boolean, opts?: WaitForOptions): Promise<void> => {


waitUntil у session застабано. Чтобы проверить логику с предикатами, нужно вернуть waitUntil нормальное поведение

KuznetsovRoman · 2023-09-19T07:46:33Z

src/utils/page-loader.ts

+        });
+
+        if (!this.mock) {
+            this.markNetworkIdle();


markNetworkIdle вернет true, если изначально сеть была активной и стала пассивной после вызова этой функции. Здесь нам не нужно ее возвращаемое значение, потому что оно всегда будет true.

KuznetsovRoman · 2023-09-19T07:48:58Z

src/utils/page-loader.ts

+        setTimeout(() => {
+            if (!this.totalRequests) {
+                this.markNetworkIdle();
+            }
+        }, this.waitNetworkIdleTimeout);


Случай "на странице нет никаких запросов", помечаем сеть пассивной по таймауту

KuznetsovRoman · 2023-09-19T07:52:18Z

src/utils/page-loader.ts

+        setTimeout(() => {
+            const markSuccess = this.markNetworkIdle();
+            if (markSuccess) {
+                logger.warn(`PageLoader: Network idle timeout`);
+            }
+        }, this.timeout);


Тут - единственное место, где мы смотрим на значение. Читается это как "Если раньше сеть была активной, и мы помечаем ее пассивной по таймауту, то пишем лог. Иначе - не пишем". Это возвращаемое значение нужно только тут, и только для того, чтоб не писать лишний лог.

src/browser/commands/openAndWait.ts

src/config/browser-options.js

src/utils/page-loader.ts

sipayRT · 2023-07-25T14:41:13Z

src/browser/commands/openAndWait.ts

+import { Matches } from "webdriverio";
+import PageLoader from "../../utils/page-loader";
+
+interface Browser {


ну этот интерфейс явно должен лежать где-то рядом с самим браузером, а не в реализации одной из его команд

Помню, что описывал его тут отдельно, потому что была проблема с типами webdriverio по части url.
Но сейчас оно реализовано отдельной командой, и этих проблем нет, спокойно будет работать, если заменить этот блок на import type Browser from "../browser";

sipayRT · 2023-07-26T09:26:40Z

src/config/browser-options.js

+            parseCli: JSON.parse,
+            validate: value => utils.assertOptionalObject(value, "openAndWaitOpts"),
+            map: value => {
+                return value === defaults.openAndWaitOpts ? value : { ...defaults.openAndWaitOpts, ...value };


почему здесь просто не оставить вторую часть условия?

sipayRT · 2023-07-26T09:50:14Z

src/utils/page-loader.ts

+        setTimeout(() => {
+            const markSuccess = this.markNetworkIdle();
+            if (markSuccess) {
+                logger.warn(`PageLoader: Network idle timeout`);


для чего здесь именно warn? и само сообщение мне ни о чем не говорит

Это сообщение поважнее обычного лога
Свидетельствует о том, что "что-то пошло не так", но при этом - не так критично, как ошибка.
Само сообщение - один из аргументов называется waitNetworkIdle, и есть еще опция timeout. Вот это значит, что по таймауту не дождались. Можно заменить на Network was never idle in ${timeout} ms

KuznetsovRoman force-pushed the HERMIONE-772.wait_page_load branch 2 times, most recently from e6afbd0 to e7fc9b4 Compare July 20, 2023 08:09

KuznetsovRoman commented Jul 20, 2023

View reviewed changes

KuznetsovRoman force-pushed the HERMIONE-772.wait_page_load branch from e7fc9b4 to b3945ba Compare July 26, 2023 17:16

KuznetsovRoman force-pushed the HERMIONE-772.wait_page_load branch 3 times, most recently from d059153 to 1928186 Compare September 7, 2023 13:22

KuznetsovRoman commented Sep 19, 2023

View reviewed changes

xrsd approved these changes Sep 19, 2023

View reviewed changes

feat: wait page load

6908156

KuznetsovRoman force-pushed the HERMIONE-772.wait_page_load branch from 1928186 to 6908156 Compare September 19, 2023 21:39

KuznetsovRoman merged commit 9e7c1a3 into master Sep 19, 2023
2 checks passed

KuznetsovRoman deleted the HERMIONE-772.wait_page_load branch September 19, 2023 21:56

sipayRT reviewed Sep 21, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: wait page load #778

feat: wait page load #778

KuznetsovRoman commented Jul 19, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Jul 20, 2023

KuznetsovRoman Sep 19, 2023

KuznetsovRoman Sep 19, 2023

KuznetsovRoman Sep 19, 2023

sipayRT Jul 25, 2023

KuznetsovRoman Sep 21, 2023

sipayRT Jul 26, 2023

sipayRT Jul 26, 2023

KuznetsovRoman Sep 21, 2023


		const selectors = typeof selector === "string" ? [selector] : selector;

		const pageLoader = new PageLoader(session, {

		const element = await this.session.$(selector);
		await element.waitForExist({ timeout: this.timeout });

feat: wait page load #778

feat: wait page load #778

Conversation

KuznetsovRoman commented Jul 19, 2023

Что сделано

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment