testcafe
testcafe copied to clipboard
Get a way to print the HTML on error
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