Trying to use `CSS.trackComputedStyleUpdates`

[Brian Jenkins]

https://chromedevtools.github.io/devtools-protocol/tot/CSS/#method-trackComputedStyleUpdates

Starts tracking the given computed styles for updates. The specified array of properties replaces the one previously specified. Pass empty array to disable tracking. Use takeComputedStyleUpdates to retrieve the list of nodes that had properties modified. The changes to computed style properties are only tracked for nodes pushed to the front-end by the DOM agent. If no changes to the tracked properties occur after the node has been pushed to the front-end, no updates will be issued for the node.

Does this mean I need to use either:

• DOM.pushNodeByPathToFrontend
• DOM.pushNodesByBackendIdsToFrontend
  

If so, how?

Here's what I have:

```ts

import type { ChromiumBrowser } from "playwright-chromium";

import { chromium } from "playwright-chromium";

const cssProperties = ["align-content", /* ... */ "zoom"];

const cssPropertiesObjectArray = [];

// Not sure whether `CSS.trackComputedStyleUpdates` expects camelCase or kebab-case

for (const property of cssProperties) {

    cssPropertiesObjectArray.push({

        "name": property.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(),

        "value": ""

    });

}

/* ... */

await client.send("DOM.enable");

await client.send("CSS.enable");

const { root } = await client.send("DOM.getDocument");

const document = {

    "head": root.children[root.children.length - 1].children[0].backendNodeId,

    "body": root.children[root.children.length - 1].children[1].backendNodeId

};

await client.send("DOM.setOuterHTML", {

    "nodeId": document.head,

    "outerHTML": (await client.send("DOM.getOuterHTML", { "nodeId": document.head })).outerHTML

});

await client.send("DOM.setOuterHTML", {

    "nodeId": document.body,

    "outerHTML": (await client.send("DOM.getOuterHTML", { "nodeId": document.body })).outerHTML

});

await page.evaluate(function() {

    for (const styleSheet of (document as unknown as Document).styleSheets) {

        if (styleSheet.href === null || !styleSheet.href.startsWith(window.location.origin)) {

            styleSheet.disabled = true;

        }

    }

});

await client.send("CSS.trackComputedStyleUpdates", {

    "propertiesToTrack": cssPropertiesObjectArray

});

await page.evaluate(function() {

    for (const styleSheet of (document as unknown as Document).styleSheets) {

        if (styleSheet.disabled) {

            styleSheet.disabled = false;

        }

    }

});

console.log(await client.send("CSS.takeComputedStyleUpdates"));

```