Get a way to print the HTML on error

[hverlin]

What is your Scenario?

When a test fails, it's useful to have a screenshot/video. However, sometimes the screenshot/video looks ok in CI and it's hard to see why a selector did not match.

What are you suggesting?

Add a configuration (like for screenshots) to take a "DOM screenshot" on failure.

What alternatives have you considered?

Such a patch can be applied locally (for example for Chrome)

diff --git a/lib/screenshots/capturer.js b/lib/screenshots/capturer.js
index 4e93dd879e5d57f9ec9d87ed56ec47cbce329cdc..693995aef3a1544e33d0ddb600137cbdd79240c4 100644
--- a/lib/screenshots/capturer.js
+++ b/lib/screenshots/capturer.js
@@ -87,6 +87,16 @@ class Capturer {
     }
     async _takeScreenshot({ filePath, pageWidth, pageHeight, fullPage = this.fullPage }) {
         await this.provider.takeScreenshot(this.browserId, filePath, pageWidth, pageHeight, fullPage);
+        try {
+            const cdpClient = await this.provider.plugin.getCurrentCDPSession(this.browserId)
+            const {root: {nodeId: documentNodeId}} = await cdpClient.DOM.getDocument();
+            const {outerHTML} = await cdpClient.DOM.getOuterHTML({nodeId: documentNodeId});
+            const htmlFilePath = filePath.replace('.png', '.html');
+            await (0, promisified_functions_1.writeFile)(htmlFilePath, outerHTML);
+            console.log('html file saved to', htmlFilePath)
+        } catch (e) {
+            console.log('error saving html file', e)
+        }
     }
     async _capture(forError, { actionId, failedActionId, pageDimensions, cropDimensions, markSeed, customPath, customPathPattern, fullPage, thumbnails } = {}) {
         if (!this.enabled)

Additional context

There is a similar request here which was not really addressed: https://github.com/DevExpress/testcafe/issues/4910