Beta Testing node.js Weblyse

[Gummibeer]

After the amount of pages grows and I don't have to care about hosting anymore, thanks Netlify, my focus got to things like more accessibility, seo and so on.
Because testing all pages manually across all the tools out there I've started to create a little script that automates this.
Yesterday I've already shared a little sneak preview Daily success! .
Today I've dropped mochawesome (which is awesome by the way) and replaced it by a custom reporter which renders a swig template (Twig for JS).
So the HTML file is now tailored for this usecase. Now I can see the screenshot and the three most important ratings without clicking anything.

Right now I'm not happy to share the code because my domains are hardcoded, the package.json looks like 💩 and my source code is cluttered.
Is anyone interested in a free/usable version? And if so would you prefer an executable JS/node file? Or a package you can require and have to call yourself?

watchtower -u https://astrotomic.info -u https://webwide.io

VS

const watchtower = require('watchtower');

watchtower.run([
    'https://astrotomic.info',
    'https://webwide.io',
]);

And would you like to configure more than the list of domains? If so: what?
The template? Add new tests (other tools/APIs to check)?

 

[kilian]

That's really cool, I would definitely consider using something like this if the results are given in a json or other parse-able format. Maybe in Polypane, or it could also make sense in a CI/CD environment.

Are the checks run concurrently? how long does a run for a single site take?

Another nice check would be webhint.io for a11y.

 

[Gummibeer]

That's really cool, I would definitely consider using something like this if the results are given in a json or other parse-able format. Maybe in Polypane, or it could also make sense in a CI/CD environment.

Are the checks run concurrently? how long does a run for a single site take?

Another nice check would be webhint.io for a11y.

So you would prefer the CLI version? Atm I create the HTML and write it to a file. But it wouldn't be a problem to write the used JS-Object as JSON to somewhere.

Right now I haven't accomplished to let them run in parallel - have to say that I'm PHP developer under normal circumstances.^^

The runtime depends a lot on the cached state of SSLlabs. If there is a cached result (a check was run within the last 24h) it takes ~20sec for my 4pages on my local MBP. The SSLlabs check is really the one that, even if cached, takes the most time.

If there isn't a cached result it will take ~5min/site. But it seems that SSLlabs deletes cached results or doesn't find them even if there was a check in the last 24h. So, even a cronjob that triggers an analysis at midnight wouldn't create a cached/usable result for the next day.
Could be that I add a local caching layer and even drop mocha as a testrunner and switch a simpler approach.

Thanks for the webhint.io tip! Looks good, even if it's somehow overlapping with lighthouse but it was pretty fast, can run on local machine, without API/chrome (if I've seen it right?) - so could be a good addition/replacement.

I think that the really really really big goal could be a tool that accepts a configuration JSON to setup URLs/domains and test-tools with basic configuration. So that you can disable any tool or single parts of it. But for sure also something that allows you to add your own tools.

uncached:

$ node test/index.js

  https://astrotomic.info
    ✓ securityheaders
    ✓ ssllabs (175963ms)
    ✓ lighthouse
    ✓ screenshot
  https://studiopolster.de
    ✓ securityheaders
    ✓ ssllabs (175858ms)
    ✓ lighthouse
    ✓ screenshot
  https://janine-pantzek.de
    ✓ securityheaders
    ✓ ssllabs (175457ms)
    ✓ lighthouse
    ✓ screenshot
  https://moinhund.hamburg
    ✓ securityheaders
    ✓ ssllabs (176167ms)
    ✓ lighthouse
    ✓ screenshot

  16 passing (12m)

cached:

$ node test/index.js

  https://astrotomic.info
    ✓ securityheaders
    ✓ ssllabs
    ✓ lighthouse
    ✓ screenshot
  https://studiopolster.de
    ✓ securityheaders
    ✓ ssllabs
    ✓ lighthouse
    ✓ screenshot
  https://janine-pantzek.de
    ✓ securityheaders
    ✓ ssllabs
    ✓ lighthouse
    ✓ screenshot
  https://moinhund.hamburg
    ✓ securityheaders
    ✓ ssllabs
    ✓ lighthouse
    ✓ screenshot

  16 passing (40s)

There you see the difference.

And would your usecase be to run it hourly for all your pages (frontpage)? Or in your CI/CD for a single page with all sub-pages? Just want to get some insights in the usecases of others for something like this to check if they can be covered.

 

[kilian]

My usecase would probably be to integrate a script running in the background in Polypane, so I'd like to display it "my own way", and it would be run when people press a button in my app. SSLLabs is slow but that's not that big of a deal in that case.

For you though, I think it makes sense to evolve this into a paid web service:

• Users can add X websites/pages[1] and run a test every Y hours depending on their subscription
• They select which tools to run for which sites
• People wait for the result or get an email when it's done.
• They can get weekly (?) stats on how well their sites are doing, kinda like gtmetrix.
• Add an API that lets people configure this and a github bot that can take automated deployments in pull requests, test them and output the results in the ticket like other tests.

[1] You could do smart things with ssllabs where you only really need to check one url per unique domain and speed up that way

re: Webhint yeah there is some overlap, but Webhint is very thorough. I think they also spin up some sort of headless chrome/puppeteer process in the background.

 

[Gummibeer]

@kilian thanks for all your feedback! Never thought that it would get this much attention and that the polypane dev would need it or even like to integrate it! 🤯🙈
The last runs I've found some random exceptions in the ssllabs library I use and some curious/random score variations in lighthouse. 🤔
So I will need to fix some things. And get deeper into JS/ES6/node development.
But thanks for the motivation! 💙🥰

 

[Gummibeer]

Right now I make good progress. :)
I've dropped mocha and created my own runner - it's now as async/parallele as possible (lighthouse can't run multiple tests in the same chrome). With 5 pages (without SSLlabs) it takes ~30sec to get securityheaders.io and lighthouse results and take 4 screenshots (MacBook Pro, 1920x1080, iPhone 7 & Pixel 2). During this I've noticed that the MBP has a default of a ~1.7 scale (with a lot digits behind).

The plan is now to add webhint next, it shouldn't slow down the process too much. And at last I will add SSLlabs again. As result a JSON file is created with everything that the tools offer (securityheaders doesn't have a real API, that's why I use my own wrapper which returns the grade and missing/present headers) - as benchmark: the JSON is 2.8MB including my five pages. 😉
One thing that makes the file this large are the lighthouse generated screenshots in base64 - which are ~10 images per page. Should I take them out, write them into a file and only put the realpath to the file in the JSON? like with the screenshots I do on the different devices? This should reduce the JSON file size and you could still access all information. The JSON would also get more readable for a human.
The bad thing is that it would remove the possibility to view the lighthouse report in Lighthouse Report Viewer :/ - okay, the viewer still works but the images aren't available, like expected.^^
Okay, I've removed the base64 images but the file is still 2MB - so less than 1MB of base64 image data. I will let them in there in this case. :)

Gummibeer/node-weblyse

Analyse your website(s) with multiple tools. Contribute to Gummibeer/node-weblyse development by creating an account on GitHub.

github.com

$ node example/index.js

securityheaders: https://github.com/
ssllabs: https://github.com/
screenshot: https://github.com/
lighthouse: https://github.com/
webhint: https://github.com/

WebHint is in but uses his own chrome/puppeteer right now :( - but it accepts/uses the same chrome options all other chrome/puppeteer tools use. :)

[Feature] Use an already present puppeteer browser instance · Issue #3405 · webhintio/hint

🚀 Feature request Description It would be great if the puppeteer connector accepts an already present puppeteer browser instance as argument. This way it doesn't have to launch its own instance...

github.com

 

[Gummibeer]

The GitHub repo is there:

Gummibeer/node-weblyse

Analyse your website(s) with multiple tools. Contribute to Gummibeer/node-weblyse development by creating an account on GitHub.

github.com

Daily success!

Today I've developed and released my first npm/node package. 🎉 https://www.npmjs.com/package/node-securityheaders.io It's a super simple wrapper for an awesome service. But I needed it for my much larger "watchtower" project. Which I've nearly finished for my own domains. Will have to rework...

webwide.io

On my local MBP a run with Build software better, together takes ~10-15sec (with cached SSLlabs).

 

[kilian]

Sweet! You could add a config option for including the images or not (or generalize it so people can choose which of the available services to run). The code looks nice and clean, I'll play around with it later!

Don't worry too much about the lighthouse score: it's non-deterministic so it'll always fluctuate a little.

 

[Gummibeer]

Sweet! You could add a config option for including the images or not (or generalize it so people can choose which of the available services to run). The code looks nice and clean, I'll play around with it later!

Don't worry too much about the lighthouse score: it's non-deterministic so it'll always fluctuate a little.

Here it is! 🎉

use dedicated configuration · Gummibeer/[email protected]

Analyse your website(s) with multiple tools. Contribute to Gummibeer/node-weblyse development by creating an account on GitHub.

github.com

You can configure the services via objects and enable/disable them via simple boolean. So you can disable the screenshot provider for example and your JSON will be a lot smaller.

I will try to add the ability to add custom providers. But first I will publish it as a npm package because I think that it's stable enough now. :)

 

[Gummibeer]

Because there was already a ton of "watchtower" packages on npm I've renamed my one to "node-weblyse".

Gummibeer/node-weblyse

Analyse your website(s) with multiple tools. Contribute to Gummibeer/node-weblyse development by creating an account on GitHub.

github.com

node-weblyse

Analyse your website(s) with multiple tools.

www.npmjs.com

It has it's first beta release now - so you can simple add it to your package.json. 😃
Will now try to rebuild my HTML report with this.

 

[Gummibeer]

Because we've discussed Axe in US Supreme Court hands victory to blind man who sued Domino’s over site accessibility it's now in. :)
Released as beta.2 and it was super easy to integrate into my current provider setup. It's the second puppeteer based tool - so just added it into the browser promise return function.

 

[Gummibeer]

And here is the reports overview. I've decided to keep a report history and use detailed views per URL.
Just have to find a cool solution/algorithm to generate some icons behind the URLs which indicate a good, warning or alert state to immediately see if any URL requires attention.

 

[avena]

Nice work here! I think having it online (with a simple input and button) will help to increase awareness.

 

[Gummibeer]

Nice work here! I think having it online (with a simple input and button) will help to increase awareness.

It's open source so feel free to do so. 😉 I would be happy if I get a back-link but isn't required.
For me it's out of scope because analysing a single URL with all the tools is pretty resource intensive and requires a running chrome and so on. Running on my local MBP is fast and easy. Setting up a server that's capable to run multiple tests in parallel or having a queue and everyone has to wait would be much more work. And I'm in the coder to coder business. I hate UIs in the most time and much more I hate humans/users without the needed tech-knowledge. 😂 That isn't meant to be aggressive - but my life is much easier without explaining complex things to normal users.
PS: the person who is able to do this is a superhuman in my eyes! Creating a UI with great UX is such a cool and important skill! 💙

PPS: that's my current state for the URL detail report view:

 

[avena]

Hehe, yeah I totally understand that even though I often feel the need to do the exact opposite (my background it's on design).

 

[Gummibeer]

Hehe, yeah I totally understand that even though I often feel the need to do the exact opposite (my background it's on design).

MY perfect world would be REST/JSON APIs and CLI apps. 😂
That's what I do day by day, feel comfortable with and believe that I'm good in. 😅

And as long as I don't have to do anything for the UI I'm pretty happy if someone creates one on top of it.

One important thing for me is the respect for each other. It's not "you only do frontend" or "a user wouldn't be able to use your API without UI".
All departments are needed for a great product! And all should work WITH each other TOGETHER and not against. And respect and know the skills and limits of each other.

 

[joshmanders]

Great first start, I looked over the code and theres a few things I would have done differently (use of global is not good) it's pretty solid.

Nice work here! I think having it online (with a simple input and button) will help to increase awareness.

I'm working on that. See signature. :)