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

[PavelMor25]

Hello @hverlin,

Unfortunately, we cannot take this enhancement to work, since we are currently focused on other tasks. We may reconsider this task priority in the future if we get requests for it. You can create a PR with the described functionality, and we will review and accept it if everything is ok.

[hverlin]

Thank you for the quick answer. I will just go with a local patch for now.

[PavelMor25]

I will close this issue for now. If more users request this feature, we will reopen it. In the meantime, you can share your patch so other users can benefit from it if needed.

[hverlin]

The patch shared here will work with Chrome at least. It can be applied with pnpm patch or other similar tools