使用 javascript selenium webdriver，我如何在测试期间获取 DOM 的 HTML？答案

【问题标题】：With javascript selenium webdriver, how do I get the HTML of the DOM during my test?使用 javascript selenium webdriver，我如何在测试期间获取 DOM 的 HTML？
【发布时间】：2020-12-15 13:43:30
【问题描述】：

我们使用 Selenium webdriver manager v 12.1.7 和 protractor 5.4.3 来帮助为我们的 Angular 9 应用程序开发端到端测试。我在我的 package.json 中设置了这个来运行我们的 e2e 测试......

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "install-puppeteer": "cd node_modules/puppeteer && npm run install",
    "lint": "ng lint",
    "e2e": "npm run install-puppeteer && ng e2e"

我想在我的测试中查看特定点的 DOM。我试过这个

const pageSource = await browser.wait(EC.visibilityOf(element(by.css('body'))), waitTimeout);
console.log('pageSource: ', pageSource.innerHTML);

但是当测试运行时，上面的代码会随着

而死

e2e/src/pages/devices.page.ts:125:44 - error TS2339: Property 'innerHTML' does not exist on type 'unknown'.

125     console.log('pageSource: ', pageSource.innerHTML);

获取 DOM HTML 的正确方法是什么？

【问题讨论】：

标签： selenium selenium-webdriver npm protractor e2e-testing

【解决方案1】：

console.log(await browser.getPageSource())

为什么你不能使用 getPagesource

你可以按如下方式打印inner和outerhtml：

console.log(await element(by.css('body')).getAttribute('outerHTML'))
console.log(await element(by.css('body')).getAttribute('innerHTML'))
console.log(await browser.getPageSource())

如果页面源不是你要找的，那么 outerHTML 就是你需要的

innerHTML 是表示 HTML 的 DOM 元素的属性在元素内部，即在开始标签和结束标签之间。 ... outerHTML 类似于 innerHTML，它是一个元素属性包括开始和结束标签以及内容。J

https://stackoverflow.com/questions/14256102/difference-between-innerhtml-and-outerhtml-in-cocoa-webview#:~:text=innerHTML%20is%20a%20property%20of,the%20opening%20and%20closing%20tags.&text=outerHTML%20is%20similar%20to%20innerHTML,as%20well%20as%20the%20content.

【讨论】：

【解决方案2】：

您正在寻找.getAttribute('innerHTML')。所以你可以 console.log 下面的内容。

console.log('pageSource: ', pageSource.getAttribute('innerHTML'));

【讨论】：

【解决方案3】：

我相信 pageSource 会返回一个字符串对象，试试这个：

 console.log('pageSource: ', pageSource);

【讨论】：