squizlabs / HTML_CodeSniffer

HTML_CodeSniffer is a client-side JavaScript application that checks a HTML document or source code, and detects violations of a defined coding standard. Comes with standards that cover the three conformance levels of the W3C's Web Content Accessibility Guidelines (WCAG) 2.0 and the U.S. Section 508 legislation.
https://squizlabs.github.io/HTML_CodeSniffer/
BSD 3-Clause "New" or "Revised" License
1.12k stars 246 forks source link

Headless Chrome instead of PhantomJS #227

Open paazmaya opened 6 years ago

paazmaya commented 6 years ago

How about moving away from PhantomJS and starting to provide instructions on how to use Headless Chrome?

https://developers.google.com/web/updates/2017/04/headless-chrome

mohanraj-r commented 6 years ago

Also since phantomjs project has been archived and further dev abandoned https://github.com/ariya/phantomjs/issues/15344

bpearson commented 6 years ago

It should be possible to support most browsers with Selenium, not just Chrome... https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_ThenableWebDriver.html#execute. However afaik only Chrome, Firefox and to some extent IE are the only headless ones.

If Selenium is not an option, there is a few more options available: https://github.com/dhamaniasad/HeadlessBrowsers

rakeshkmr516 commented 6 years ago

I am automating with Selenium , Chrome is working fine able to get violations however with Firefox am unable to get them

KInd of the same issue I got using geckodriver( firefox) of Selenium throwing TypeError: window.HTMLCS_RUNNER is undefined Issue Link: #219

@bpearson Interesting thing is am able to get the same code work using chromedriver of selenium runs code on Chrome browser

bpearson commented 6 years ago

It works for me. This is what I did (assuming firefox/git/node is installed)... First, cloned the HTMLCS repo and changed into that repo. Installed webdriver via node... npm install selenium-webdriver Grabbed the gecko driver and dropped it in the current directory. Created this file (as test.js)...

const {Builder, By, Key, until, Logger} = require('selenium-webdriver');

const script = "var _p='//squizlabs.github.io/HTML_CodeSniffer/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});";

(async function example() {
  let driver = await new Builder().forBrowser('firefox').build();
  try {
    await driver.get('http://www.google.com/ncr');
    await driver.executeScript(script);
    await driver.sleep(10000);
  } finally {
    await driver.quit();
  }
})();

Then ran the script with: node test.js and I saw HTMLCS load up on the Google front page (I got 4/11/39 as the results). (Note: the script is just a cut down version of the bookmarklet)