How to write automated tests for the <noscript> tag?

Question

I'm building a webapp which falls back on a <noscript> tag if Javascript is disabled. I'd like to validate that that tag shows, but I'm unsure how to do that with any of the frameworks I have, or any framework in general.

The app in question by default shows the following when Javascript is disabled:

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

The app replaces the above with the following when the script is loaded:

 <div>
   Hello World
 </div>

Right now for tests I'm using NightmareJS and Testem with jasmine. I don't have to be using those, but I'd like to still use Javascript if possible.

I'm completely stumped here and have no idea where I would even start - all the StackOverflow questions seem to be about how to USE <noscript>, and not validating it in an end-to-end or unit test (in an automated manner).

Klute

Just disable Javasctipt in the devtools and check if your noscript content is displayed: #13405883 – Mope

@OlivierKrull I think the OP is talking about automatic testing. – Expenditure

@NicholasKyriakides So then he should maybe take a look at puppeteer, I can imagine there is a possibility to turn of Javascript in puppeteer and use it in the tests – Mope

I'm researching it now focusing on Chrome's WebDriver. although puppeteer should work too. Just gotta find that Chromium flag that disables JS. – Expenditure

W3M for markup with no js. – Vogler

Answer 1

For those using Nightmare JS there is an option when creating an instance of nightmare, however some of the functions seem to fail to run (such as evaluate, or exists). In my case, I saved the page as HTML, and then verified that the HTML existed. It is also possible to save a screenshot, or pdf, to also verify the correct output.

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()
    })
  })
})

Klute

Answer 2

NightmareJS uses Electron under the hood to run the tests which doesn't seem to support passing a flag that disables Javascript, although I have to warn you that I didn't dig around that much.

... I'm using NightmareJS and Testem with jasmine. I don't have to be using those, but I'd like to still use javascript if possible.

Another solution is to use NightwatchJS instead of NightmareJS, which is a testing framework that uses ChromeDriver to drive the tests which allows disabling JS by passing prefs to Chromium.

I've written a sample project as a very basic example on how to run NightwatchJS tests with JS disabled.

The project uses the following configuration to disable JS:

nightwatch.json

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

In the above configuration, it's this particular line that is passed to Chromium which hints that we want JS disabled when NighwatchJS runs the tests:

"profile.managed_default_content_settings.javascript": 2

That being said, I'd suggest you dig a bit more thoroughly in Nightmare's documentation/issues to check if you can pass the above pref through NightmareJS instead of rewriting all your tests in NightwatchJS for this little quirk.

Expenditure

I'm having trouble running the sample, but I'll look into that preference for NightmareJS (to be clear, I wouldn't re-write any tests, and sooner would just have Nightwatch kick off after Nightmare). That being said, this checks out, and I'll accept this, and post if I find another solution as well. – Klute

What kind of problem are you having with the sample? Perhaps I can help. – Expenditure

I can run the server correctly, but when I run the nightwatch command it fails with a "Connection refused! Is selenium server started?" imgur.com/a/o3QCbMs – Klute

Well did you start the selenium server using: $ java -jar selenium/selenium-server-standalone-3.9.1.jar? I've mentioned in the README that you should do so. – Expenditure

Yeah, I have it running, (you can see in the image it running in the left terminal). All n' all, might be a moot point since I don't believe the CI servers I have will have java installed, so I'm not that focused on getting Nightwatch to work specifically. – Klute

I have never heard of a CI server that doesn't come with Selenium pre-installed and configured for you. Last note: Selenium might be running on another port. Check NightwatchJS Getting Started on how to configure ports if you eventually go with this. – Expenditure

But how to combine this approach with other nightwatch tests that need JS turned on in a single application? – Simarouba