如何为 <noscript> 标签编写自动化测试？答案

【问题标题】：How to write automated tests for the <noscript> tag?如何为 <noscript> 标签编写自动化测试？
【发布时间】：2019-03-19 06:38:01
【问题描述】：

我正在构建一个 web 应用程序，如果禁用 Javascript，它会依赖 <noscript> 标记。我想验证该标签是否显示，但我不确定如何使用我拥有的任何框架或任何一般框架来做到这一点。

当禁用 Javascript 时，相关应用默认显示以下内容：

 <div>
  <noscript>
    <h1>Javascript Disabled</h1>
    Use this page to show content when Javascript has been disabled
  </noscript>
 </div>

应用程序在加载脚本时将上述内容替换为以下内容：

 <div>
   Hello World
 </div>

现在我正在使用 NightmareJS 和 Testem 和 jasmine 进行测试。我不必使用这些，但如果可能的话，我仍想使用 Javascript。

我在这里完全被难住了，甚至不知道从哪里开始 - 所有 StackOverflow 问题似乎都是关于如何使用 <noscript>，而不是在端到端或单元测试中验证它（在一种自动化的方式）。

【问题讨论】：

只需在 devtools 中禁用 Javasctipt 并检查您的 noscript 内容是否显示：stackoverflow.com/questions/13405383/…
@OlivierKrull 我认为 OP 正在谈论自动测试。
@NicholasKyriakides 那么他或许应该看看puppeteer，我可以想象有可能在puppeteer 中打开Javascript 并在测试中使用它
我现在正在研究它，重点是 Chrome 的 WebDriver。虽然 puppeteer 也应该工作。只需要找到禁用 JS 的 Chromium 标志。
W3M 用于没有 js 的标记。

标签： javascript html testing integration-testing noscript

【解决方案1】：

NightmareJS 在后台使用 Electron 运行测试，而 doesn't seem to support passing a flag 禁用了 Javascript，尽管我必须警告你我并没有深入研究。

...我正在使用 NightmareJS 和 Testem 和 jasmine。我不必使用这些，但如果可能的话，我还是想使用 javascript。

另一种解决方案是使用 NightwatchJS 代替 NightmareJS，这是一个使用 ChromeDriver 驱动测试的测试框架，允许通过将首选项传递给 Chromium 来禁用 JS。

我写了一个sample project 作为一个非常基本的示例，说明如何在禁用 JS 的情况下运行 NightwatchJS 测试。

项目使用如下配置禁用JS：

`nightwatch.json`

{
  "test_settings" : {
    "default" : {
      "desiredCapabilities": {
        "browserName": "chrome",
        "chromeOptions" : {
          "prefs" : {
            "profile.managed_default_content_settings.javascript": 2
          }
        }
      }
    }
  }
}

在上面的配置中，传递给 Chromium 的就是这一行，暗示我们希望在 NighwatchJS 运行测试时禁用 JS：

"profile.managed_default_content_settings.javascript": 2

话虽如此，我建议您在 Nightmare 的文档/问题中更深入地研究一下，以检查您是否可以通过 NightmareJS 传递上述首选项，而不是为了这个小怪癖而在 NightwatchJS 中重写所有测试。

【讨论】：

我在运行示例时遇到了问题，但我会研究一下对 NightmareJS 的偏好（要明确的是，我不会重新编写任何测试，而且会尽快启动 Nightwatch噩梦之后）。话虽这么说，这检查出来了，我会接受这个，如果我也找到其他解决方案，我也会发布。
您对样本有什么问题？也许我可以帮忙。
我可以正确运行服务器，但是当我运行 nightwatch 命令时它失败并显示“连接被拒绝！硒服务器是否已启动？” imgur.com/a/o3QCbMs
您是否使用 $ java -jar selenium/selenium-server-standalone-3.9.1.jar 启动了 selenium 服务器？我在自述文件中提到你应该这样做。
是的，我正在运行它，（您可以在图像中看到它在左侧终端中运行）。总而言之，这可能是一个有争议的问题，因为我不相信我拥有的 CI 服务器会安装 java，所以我并不专注于让 Nightwatch 专门工作。

【解决方案2】：

对于那些使用 Nightmare JS 的人来说，在创建 nightmare 实例时有一个选项，但是某些功能似乎无法运行（例如 evaluate 或 exists）。在我的例子中，我将页面保存为 HTML，然后验证 HTML 是否存在。也可以保存屏幕截图或 pdf，以验证输出是否正确。

const nightmare = require('nightmare')
const fs = require('fs')

const browser = nightmare({
  webPreferences: {
    javascript: false
  }
})

describe('Page with Javascript Off', () => {
  beforeAll((done) => {
    browser.goto('http://localhost:8080')
      .html('./tests/no-js-result.html', 'HTMLOnly')
      .then(() => done())
  })
  it('should show page when JS is disabled', (done) => {
    fs.readFile('./tests/no-js-result.html', 'utf8', function(err, html){
      if (err) fail('Could not read no-js-result.html')
      expect(html).toContain('<h1>Javascript Disabled</h1>')
      done()
    })
  })
})

【讨论】：