feature(webpage-impact): add support for custom user interactions

Signed-off-by: alexzurbonsen <[email protected]>

Author: alexzurbonsen

example-manifests/measure-webpage.yml

@@ -13,7 +13,8 @@ initialize:
       path: '@tngtech/if-webpage-plugins'
       config:
         scrollToBottom: true
-        url: https://www.tngtech.com
+        url: https://www.sueddeutsche.de
+        customUserInteraction: '/absolute/path/to/your/script.js'
     'co2js':
       method: Co2js
       path: '@tngtech/if-webpage-plugins'

src/lib/webpage-impact/README.md

@@ -24,6 +24,10 @@ The follwing config parameters are optional:
   - `accept`: string https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept
   - `accept-encoding`: array of allowed encodings (a single encoding can also be passed as a string) https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding
 
+Experimental:
+
+- `customUserInteraction`: absolute path to a Javascript Common JS module, that exports a function with the signature `userInteraction: (page: Page) => Promise<void>`. For an example see below. Setting `customUserInteraction` cannot be set together with `scrollToBottom`.
+
 ### Returns
 
 - `network/data/bytes`: page weight in bytes
@@ -80,3 +84,26 @@ tree:
           - webpage-impact
       inputs:
 ```
+
+## Experimental: Custom user interactions
+
+Example script:
+
+```js
+const userInteraction = async page => {
+  // on tngtech.com click on the "Leistungen" link
+  await page.locator('#menu > ul > li:nth-child(1) > a').click();
+  await page.waitForNavigation();
+
+  // for debugging purposes
+  await page.screenshot({
+    path: '/absolute/path/image.png',
+  });
+};
+
+exports.userInteraction = userInteraction;
+```
+
+Puppeteer docs on page interactions: https://pptr.dev/guides/page-interactions
+
+TODO: How to deal with the reload option?

src/lib/webpage-impact/index.ts

@@ -24,6 +24,7 @@ type WebpageImpactOptions = {
   reload: boolean;
   cacheEnabled: boolean;
   scrollToBottom?: boolean;
+  customUserInteraction?: string;
 };
 
 type ResourceBase = {
@@ -36,6 +37,10 @@ type Resource = ResourceBase & {transferSize: number};
 
 type Device = keyof typeof KnownDevices;
 
+interface CustomUserInteraction {
+  userInteraction: (page: Page) => Promise<void>;
+}
+
 const LOGGER_PREFIX = 'WebpageImpact';
 
 const ALLOWED_ENCODINGS = [
@@ -183,6 +188,7 @@ const WebpageImpactUtils = () => {
           reload: false,
           cacheEnabled: false,
           scrollToBottom: config?.scrollToBottom,
+          customUserInteraction: config?.customUserInteraction,
         });
 
         let reloadedResources: Resource[] | undefined;
@@ -210,7 +216,12 @@ const WebpageImpactUtils = () => {
   const loadPageResources = async (
     page: Page,
     url: string,
-    {reload, cacheEnabled, scrollToBottom}: WebpageImpactOptions
+    {
+      reload,
+      cacheEnabled,
+      scrollToBottom,
+      customUserInteraction,
+    }: WebpageImpactOptions
   ): Promise<Resource[]> => {
     try {
       await page.setCacheEnabled(cacheEnabled);
@@ -261,14 +272,19 @@ const WebpageImpactUtils = () => {
 
       if (!reload) {
         await page.goto(url, {waitUntil: 'networkidle0'});
+        if (customUserInteraction) {
+          const module = await import(customUserInteraction);
+          if (iscustomUserInteraction(module)) {
+            await module.userInteraction(page);
+          }
+        }
       } else {
+        console.log('before reload');
         await page.reload({waitUntil: 'networkidle0'});
       }
 
-      if (scrollToBottom) {
-        // await page.screenshot({path: './TOP.png'});
+      if (!customUserInteraction && scrollToBottom) {
         await page.evaluate(scrollToBottomOfPage);
-        // await page.screenshot({path: './BOTTOM.png'});
       }
 
       await cdpSession.detach();
@@ -281,6 +297,15 @@ const WebpageImpactUtils = () => {
     }
   };
 
+  const iscustomUserInteraction = (
+    customUserInteraction: any
+  ): customUserInteraction is CustomUserInteraction => {
+    return (
+      'userInteraction' in customUserInteraction &&
+      typeof customUserInteraction['userInteraction'] === 'function'
+    );
+  };
+
   const mergeCdpData = (
     cdpResponses: Record<string, ResourceBase>,
     cdpTransferSizes: Record<string, {transferSize: number}>
@@ -381,6 +406,7 @@ const WebpageImpactUtils = () => {
       mobileDevice: z.string().optional(),
       emulateNetworkConditions: z.string().optional(),
       scrollToBottom: z.boolean().optional(),
+      customUserInteraction: z.string().optional(),
       headers: z
         .object({
           accept: z.string().optional(),
@@ -428,6 +454,15 @@ const WebpageImpactUtils = () => {
             PredefinedNetworkConditions
           ).join(', ')}.`,
         }
+      )
+      .refine(
+        data => {
+          return !(data?.scrollToBottom && data?.customUserInteraction);
+        },
+        {
+          message:
+            '`scrollToBottom: true` and `customUserInteraction` cannot be provided together.',
+        }
       );
 
     return validate<z.infer<typeof configSchema>>(configSchema, config);