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

Question

我们使用带有量角器 5.4.3 的 Selenium webdriver manager v 12.1.7 来帮助开发我们的 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 的正确方法是什么？

Answer 1

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

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

Answer 2

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 is a property of a DOM element that represents the HTML inside the element, i.e. between the opening and closing tags. ... outerHTML is similar to innerHTML, it is an element property that includes the opening an closing tags as well as the content.J

.

Answer 3

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

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

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

With javascript selenium webdriver, how do I get the HTML of the DOM during my test?

selenium

npm

selenium-webdriver

protractor

e2e-testing