AG-14291 performance tests on playwright

Squashed commit of the following: commit 93b177f6bbc2ac93c60e50845ab2dfc3cfcde9d2 Author: Slava Leleka <[email protected]> Date: Mon Oct 31 17:22:11 2022 +0200 update readme commit 773d29043691e086fe874edded16d1450ecfda95 Author: Slava Leleka <[email protected]> Date: Mon Oct 31 17:22:01 2022 +0200 no script for test performance commit b57efc9013ce76db5d72c5bda6adb6fae65278d1 Merge: d5dcba3 fe3bad2 Author: Slava Leleka <[email protected]> Date: Mon Oct 31 17:17:09 2022 +0200 Merge branch 'epic/AG-3532' into feature/AG-14291 commit d5dcba3d64cf585bb6b8bb080d232f24f4f13732 Author: Slava Leleka <[email protected]> Date: Wed Oct 26 18:15:48 2022 +0300 save performance results commit bc868b91e180229982c2a10fc9a3ea76bf1aa637 Author: Slava Leleka <[email protected]> Date: Wed Oct 26 18:07:26 2022 +0300 run performance tests separately commit 27dfec32fba633ba214a9275a6be978570ca6038 Author: Slava Leleka <[email protected]> Date: Tue Oct 25 18:16:37 2022 +0300 remove unnecessary comments commit b476683ee7006ecbc9a3dcc552b4e8e05ffb632f Author: Slava Leleka <[email protected]> Date: Mon Oct 24 19:29:05 2022 +0300 save performance selector results to comments commit f30330c7607fb64bb617ac941d33e7cb6201203e Author: Slava Leleka <[email protected]> Date: Tue Oct 18 16:19:51 2022 +0300 compare results for v1 and v2 commit d0ef72d11afa95cc10871c5fbce7b63843c4fab8 Author: Vladimir Zhelvis <[email protected]> Date: Mon Oct 24 18:16:14 2022 +0300 move extCssDocument instance from 'src/extended-css' to 'selector/query' commit d9b5f7e2bc7e3901dff419f042b76a79e44d2089 Author: Slava Leleka <[email protected]> Date: Mon Oct 24 17:55:12 2022 +0300 fix extCssDoc cache commit f19dc30f83e50ca96d73267abdfbaadd50ef05e1 Author: Slava Leleka <[email protected]> Date: Thu Oct 20 22:11:01 2022 +0300 use lib bundles for performance selector tests commit de1246797ec22bed13ab418d9b0b86bf079e497e Merge: b33b5ad 7dd35ed Author: Slava Leleka <[email protected]> Date: Wed Oct 19 14:38:59 2022 +0300 Merge branch 'epic/AG-3532' into feature/AG-14291 commit b33b5ada7f63276b18702fdac971dd7a3d8a3a02 Merge: ece54a2 b8b7e8a Author: Slava Leleka <[email protected]> Date: Fri Oct 14 17:57:30 2022 +0300 Merge branch 'epic/AG-3532' into feature/AG-14291 commit ece54a2e47079bab2e0e1907183a58d32c7af9b6 Merge: 762c0b6 a243fea Author: Slava Leleka <[email protected]> Date: Mon Sep 12 14:32:29 2022 +0300 merge epic into feature/AG-14291, resolve conflicts commit 762c0b6eb1feccace41f7edf999f4782cc0a2b15 Author: Slava Leleka <[email protected]> Date: Fri Aug 5 16:54:00 2022 +0300 renaming for checkPerformanceV2 commit 21a6996388746851769501f24d1f05b37fb75d21 Author: Slava Leleka <[email protected]> Date: Fri Aug 5 16:52:48 2022 +0300 use ExtendedCss for checkPerformanceV2 commit 2fe722e8494360b0f3526c4ccf96b91e3371e929 Author: Slava Leleka <[email protected]> Date: Fri Aug 5 16:37:57 2022 +0300 add jest.setTimeout for performance-selector tests commit ac4be92dc8dc4513b07180242581d0b0a3f704e5 Author: Slava Leleka <[email protected]> Date: Fri Aug 5 16:19:37 2022 +0300 revert old lib for performance tests commit 2a75f149209df75253bdf552742ba50a537f73b7 Merge: dfc6e63 cc94234 Author: Slava Leleka <[email protected]> Date: Fri Aug 5 16:14:41 2022 +0300 merge epic into feature/AG-14291 commit dfc6e63a9df184aff3d2f886dc55d04e625d089d Merge: 43b6360 c59d012 Author: Slava Leleka <[email protected]> Date: Thu Jun 23 15:42:06 2022 +0300 Merge branch 'epic/AG-3532' into feature/AG-14291 ... and 11 more commits
AdguardTeam · Oct 31, 2022 · deb8dfc · deb8dfc
1 parent fe3bad2
commit deb8dfc
Show file tree

Hide file tree

Showing 15 changed files with 6,023 additions and 16 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -2,3 +2,4 @@ node_modules
 dist
 .eslintrc.js
 babel.config.js
+test/test-files
diff --git a/README.md b/README.md
@@ -671,6 +671,11 @@ Run local node testing
 yarn test local
 ```
 
+Run performance tests which are not included in `test local` run and should be executed manually:
+```
+yarn test performance
+```
+
 ## Usage
 
 You can import, require or copy IIFE module with ExtendedCss into your code, e.g.

diff --git a/jest.config.ts b/jest.config.ts
@@ -5,6 +5,9 @@ const config: Config.InitialOptions = {
     testPathIgnorePatterns: [
         './test/browserstack',
         './tools/test',
+        // do not run performance selector tests while `yarn test local`
+        // as it should be run separately and manually
+        './test/performance-selector/performance-selector.test.ts',
     ],
 };
 

diff --git a/src/extended-css/extended-css.ts b/src/extended-css/extended-css.ts
@@ -1,4 +1,4 @@
-import { ExtCssDocument } from '../selector';
+import { extCssDocument } from '../selector';
 import { parse as parseStylesheet } from '../stylesheet';
 
 import { ThrottleWrapper } from './helpers/throttle-wrapper';
@@ -72,6 +72,7 @@ export interface ExtCssConfiguration {
     debug?: boolean;
 }
 
+
 /**
  * Main class of ExtendedCss lib.
  *
@@ -93,8 +94,6 @@ export class ExtendedCss {
 
     private applyRulesCallbackListener: () => void;
 
-    // Instance of ExtCssDocument is needed for using selector-ast cache
-    extCssDocument: ExtCssDocument;
 
     /**
      * Creates new ExtendedCss.
@@ -110,15 +109,13 @@ export class ExtendedCss {
             throw new Error('ExtendedCss configuration should be provided.');
         }
 
-        this.extCssDocument = new ExtCssDocument();
-
         this.context = {
             beforeStyleApplied: configuration.beforeStyleApplied,
             debug: false,
             affectedElements: [],
             isDomObserved: false,
             removalsStatistic: {},
-            parsedRules: parseStylesheet(configuration.styleSheet, this.extCssDocument),
+            parsedRules: parseStylesheet(configuration.styleSheet, extCssDocument),
             mainCallback: () => {},
         };
 
@@ -196,8 +193,7 @@ export class ExtendedCss {
         const start = ThrottleWrapper.now();
 
         try {
-            const extCssDoc = new ExtCssDocument();
-            return extCssDoc.querySelectorAll(selector);
+            return extCssDocument.querySelectorAll(selector);
         } finally {
             const end = ThrottleWrapper.now();
             if (!noTiming) {

diff --git a/src/selector/index.ts b/src/selector/index.ts
@@ -8,4 +8,4 @@ export { tokenize } from './tokenizer';
 
 export { parse } from './parser';
 
-export { ExtCssDocument, selectElementsByAst } from './query';
+export { extCssDocument, ExtCssDocument, selectElementsByAst } from './query';
diff --git a/src/selector/query.ts b/src/selector/query.ts
@@ -97,3 +97,5 @@ export class ExtCssDocument {
         return selectElementsByAst(ast);
     }
 }
+
+export const extCssDocument = new ExtCssDocument();
diff --git a/test/helpers/performance-checker.ts b/test/helpers/performance-checker.ts
@@ -0,0 +1,86 @@
+declare global {
+    const extCssV1: {
+        query(selector: string, noTiming: boolean): Element[];
+    };
+
+    const extCssV2: {
+        ExtendedCss: {
+            query(selector: string): Element[];
+        }
+    };
+}
+
+export interface PerformanceResult {
+    selector: string,
+    status: boolean,
+    elapsed: number,
+    count: number,
+    average: number,
+    result?: string,
+}
+
+const LOOP_COUNT = 10 * 1000;
+const MAX_ELAPSED_VALUE = 15 * 1000;
+
+/**
+ * Runs ExtendedCSS v2 query for selector.
+ *
+ * @param selector Css selector - standard or extended.
+ */
+const checkPerformanceV2 = (selector: string): PerformanceResult  => {
+    const startTime = new Date().getTime();
+    let iCount = LOOP_COUNT;
+    let resultOk = true;
+    while (iCount--) {
+        const nodes = extCssV2.ExtendedCss.query(selector);
+        if (!nodes || !nodes.length) {
+            resultOk = false;
+        }
+    }
+    const elapsed = new Date().getTime() - startTime;
+    if (elapsed > MAX_ELAPSED_VALUE) {
+        resultOk = false;
+    }
+    const resData = {
+        selector: selector,
+        status: resultOk,
+        elapsed: elapsed,
+        count: LOOP_COUNT,
+        average: elapsed / LOOP_COUNT,
+    };
+    return resData;
+};
+
+/**
+ * Runs ExtendedCSS v1 query for selector.
+ *
+ * @param selector Css selector - standard or extended.
+ */
+const checkPerformanceV1 = (selector: string): PerformanceResult => {
+    const startTime = new Date().getTime();
+    let iCount = LOOP_COUNT;
+    let resultOk = true;
+    while (iCount--) {
+        const nodes = extCssV1.query(selector, true);
+        if (!nodes || !nodes.length) {
+            resultOk = false;
+        }
+    }
+    const elapsed = new Date().getTime() - startTime;
+    if (elapsed > MAX_ELAPSED_VALUE) {
+        resultOk = false;
+    }
+    const resData = {
+        selector: selector,
+        status: resultOk,
+        elapsed: elapsed,
+        count: LOOP_COUNT,
+        average: elapsed / LOOP_COUNT,
+    };
+    return resData;
+};
+
+export const checkPerformance = {
+    v1: checkPerformanceV1,
+    v2: checkPerformanceV2,
+};
diff --git a/test/helpers/xpath-evaluate-counter.ts b/test/helpers/xpath-evaluate-counter.ts
@@ -0,0 +1,19 @@
+import { ExtCssDocument } from '../../src/selector';
+
+export interface XpathEvaluationResult {
+    counter: number,
+    elements: Element[],
+}
+
+export const checkXpathEvaluation = (selector: string, document: Document): XpathEvaluationResult => {
+    let counter = 0;
+    const nativeEvaluate = Document.prototype.evaluate;
+    Document.prototype.evaluate = (...args) => {
+        counter += 1;
+        return nativeEvaluate.apply(document, args);
+    };
+    const extCssDoc = new ExtCssDocument();
+    const elements = extCssDoc.querySelectorAll(selector);
+
+    return { counter, elements };
+};
diff --git a/test/performance-selector/jest.config.ts b/test/performance-selector/jest.config.ts
@@ -0,0 +1,13 @@
+import type { Config } from '@jest/types';
+
+export const performanceConfig: Config.InitialOptions = {
+    silent: true,
+    testPathIgnorePatterns: [
+        './test/browserstack',
+        './tools/test',
+    ],
+    // for manual run of performance selector tests
+    testRegex: ['performance-selector.test.ts'],
+};
+
+export default performanceConfig;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,4 +8,4 @@ export { tokenize } from './tokenizer';

		export { parse } from './parser';

		export { ExtCssDocument, selectElementsByAst } from './query';
		export { extCssDocument, ExtCssDocument, selectElementsByAst } from './query';
-Original file line number
+Diff line change
@@ Expand Up / @@ -97,3 +97,5 @@ export class ExtCssDocument { @@
             return selectElementsByAst(ast);
         }
     }
+    export const extCssDocument = new ExtCssDocument();