We Keep Coding

Webdriver.io - Unable to load spec files quite likely because they rely on `browser` object

I'm using Webdriver.io to run tests on a large number of pages. Because all the specs for the pages are in a JSON file, I have a special class that sets up the test. It looks like this:
module.exports = class PageTester {
suiteName = '';
browser = {};
constructor (suiteName, browser) {
this.suiteName = suiteName;
this.browser = browser;
}
testModel(currentModel) {
describe(this.suiteName + ' endpoint ' + currentModel.url, () => {
this.browser.url(currentModel.url);
/* it() statements for the test */
});
}
}
Then in my specs folder I have a file that loads the JSON and plugs it into the PageTester class, like this:
const PageTester = require('../modules/PageTester');
const models = require('/path/to/some/file.json');
const pageTester = new PageTester('Some Name', browser);
for (const modelName in models) {
pageTester.testModel(models[modelName]);
}
When I run this code, WebdriverIO gives me the following warning:
WARN #wdio/mocha-framework: Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.
`browser` object has only `capabilities` and some flags like `isMobile`.
Helper files that use other `browser` commands have to be moved to `before` hook.
Spec file(s): /suite/test/specs/test.js
All the tests seem to run fine, so I don't actually understand what this warning is complaining about and what negative consequences ignoring it may have. So I would like to a) understand why this is happening and b) how it would be possible to get rid of this warning given the way my code is set up.

In my case, I resolve it by fixing the path for the require files. I noticed that my path was wrong. But the error that wdio throws is not really helpful. :/

you can only interact with browser object inside it blocks because it is not fully accessible before the browser session is started.
See https://webdriver.io/blog/2019/11/01/spec-filtering.html for details.

You simply should ensure your spec file and respective page file are kept on a similar folder structure.

How do you use an npm package with require & module export as a plain JS library

I'm not sure I'm even asking the right question here, sorry, but I think the two general ones are:
In what way do you need to modify a node.js package using require etc to be used as a plain embedded script/library in HTML?
How do you call a class constructor (?) in JS as a function to validate a form field?
I'm trying to use this small JS library NoSwearingPlease (which is an npm package) in an environment with no node or build system – so I'm just trying to call it like you would jQuery or something with a script & src in the HTML, and then utilise it with a small inline script.
I can see a couple of things are required to get this working:
the JSON file needs to be called in a different way (not using require etc)
the checker variable needs to be rewritten, again without require
I attempted using jQuery getJSON but I just don't understand the class & scope bits of the library enough to use it I think:
var noswearlist = $.getJSON( "./noswearing-swears.json" );
function() {
console.log( "got swear list from inline script" );
})
.fail(function() {
console.log( "failed to get swear list" );
})
noswearlist.done(function() {
console.log( "done callback as child of noswearlist variable" );
var checker = new NoSwearing(noswearlist);
console.log(checker);
});
Please halp. Thanks!

No need to modify, when outside of node the class is just appended to window (global):
fetch("https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/swears.json").then(response => {
return response.json();
}).then(data => {
var noSwearing = new NoSwearing(data);
console.log(noSwearing.check("squarehead"));
});
<script src="https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/index.js"></script>

In the future, you can answer this type of question on your own by looking through the source code and looking up things you don't understand. That being said, here's what I was able to gather doing that myself.
For your first question, if you have no build tools you can't use require, you have to hope your NPM package supports adding the class to the window or has a UMD export (which in this case, it does). If so, you can download the source code or use a CDN like JSDelivr and add a <script> tag to link it.
<script src="https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/index.js"></script>
I'm having a hard time deciphering your script (it has a few syntax errors as far as I can tell), so here's what you do if you have a variable ns containing the JSON and the string str that you need to check:
var checker = new NoSwearing(ns);
checker.check(str);
As an aside, you should really use build tools to optimize your bundle size and make using packages a lot easier. And consider dropping jQuery for document.querySelector, fetch/XMLHttpRequest, and other modern JavaScript APIs.

Running Raygun.io with Angular Universal

I'm adding Raygun.io APM to our Angular 8 app with Angular Universal.
It is known that raygun.io has a client side javascript library and to add this to a Angular with Universal, DOM window API must be created. This can be done using domino npm using this code below:
There is also an installation guide for Angular via npm called raygun4js however the problem still exists.
// Domino for defining Windows API in SSR
(found # https://www.npmjs.com/package/domino )
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(index.html).toString();
const win = domino.createWindow(template);
global['window'] = win; // will be used for NodeJS to read Window API
global['document'] = win.document;
*domino creates a window api and sets it to a global called win.
After adding this line to an NPM project server.ts, build and run command - an exception is found:
Raygun.Utilities = raygunUtilityFactory(window, Raygun);
^
ReferenceError: raygunUtilityFactory is not defined
This roots that a raygunUtilityFactory function is not defined within window API. Looking inside raygun.js in Github
window.raygunUtilityFactory = function(window, Raygun) {
var rg = {
getUuid: function() {
function _p8(s) {
var p = (Math.random().toString(16) + '000000000').substr(2, 8);
return s ? '-' + p.substr(0, 4) + '-' + p.substr(4, 4) : p;
}
// more code.....
Question is, how can NodeJS read raygunUtilityFactory function during build if it can't find it in window API?
UPDATE: I tried to do this on a smaller project but it seems that even its document for installing raygun.io doesn't include procedures for Angular Universal. It basically can't detect window API using domino
Raygun.Utilities = raygunUtilityFactory(window, Raygun);
^
ReferenceError: raygunUtilityFactory is not defined

Answer: Setting Raygun js as a global object and referencing it to a declared variable inside a service.
Reference: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af
declare var rg4js: any;
*place this inside your service or your main component ts.
<script type="text/javascript">
!function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
(a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>
*add this to your index.html or download and add it to your project.
Do take note that the raygun script should be referenced as rg4js.
Angular will automatically know that the rg4js inside your TS file is reference to your raygun script tag.
-- I'm now able to see the crash reporting and the pulse monitoring inside our client dashboard. However, I noticed that all client side errors logs are not caught. I'm still researching way to send these unhandled errors - starting with windows.onerror.

Good to hear you have figured out part of the solution!
AngularJS captures a lot of errors under the hood automatically and to properly capture errors you will need to register your own angular error handler and when the callback is fired you can use the Raygun4JS send method to send the message to Raygun.
export class RaygunErrorHandler implements ErrorHandler {
handleError(e: any) {
rg4js('send', {
error: e,
});
}
}
Raygun has a little bit of angular documentation but can't import raygun4js via npm for Angular Universal (as per your discovery) so you will need to modify the examples shown. That said they should provide a good starting point.

Make Closure Compiler strip log function usages

I have a logging API I want to expose to some internal JS code. I want to be able to use this API to log, but only when I am making a debug build. Right now, I have it partially working. It only logs on debug builds, but the calls to this API are still in the code when there is a regular build. I would like the closure-compiler to remove this essentially dead code when I compiler with goog.DEBUG = false.
Log definition:
goog.provide('com.foo.android.Log');
com.foo.Log.e = function(message){
goog.DEBUG && AndroidLog.e(message);
}
goog.export(com.foo.Log, "e", com.foo.Log.e);
AndroidLog is a Java object provided to the webview this will run in, and properly externed like this:
var AndroidLog = {};
/**
* Log out to the error console
*
* #param {string} message The message to log
*/
AndroidLog.e = function(message) {};
Then, in my code, I can use:
com.foo.Log.e("Hello!"); // I want these stripped in production builds
My question is this: How can I provide this API, use this API all over my code, but then have any calls to this API removed when not compiled with goog.DEBUG = true? Right now, my code base is getting bloated with a bunch of calls to the Log API that are never called. I want the removed.
Thanks!

The Closure Compiler provides four options in CompilerOptions.java to strip code: 1) stripTypes, 2) stripNameSuffixes, 3) stripNamePrefixes and 4) stripTypePrefixes. The Closure build tool plovr, exposes stripNameSuffixes and stripTypePrefixes through its JSON configuration file options name-suffixes-to-strip and type-prefixes-to-strip.
There are excellent examples of how these options work in Closure: The Definitive Guide on pages 442 to 444. The following lines are provided as common use cases:
options.stripTypePrefixes = ImmutableSet.of(“goog.debug”, “goog.asserts”);
options.stripNameSuffixes = ImmutableSet.of(“logger”, “logger_”);
To understand the nuances of these options and avoid potential pitfalls, I highly recommend reading the complete examples in Closure: The Definitive Guide.

Instead of running your own script as jfriend00 suggested I would look at the define api of the compiler (which is where goog.DEBUG comes from as well), you have DEBUG, COMPILED by default, but there you can roll your own.

OK, it turns out this is easy to do if I stop exporting com.foo.Log() and its methods. If I really want to be able to log in some specific cases, but still strip out the log calls in my internal code, I can just declare two classes for this:
// This will get inlined and stripped, since its not exported.
goog.provide('com.foo.android.Log');
com.foo.Log.e = function(message){
goog.DEBUG && AndroidLog.e(message);
}
// Don't export.
// This be available to use after closure compiler runs, since it's exported.
goog.provide('com.foo.android.production.Log');
goog.exportSymbol("ProductionLog", com.foo.android.production.Log);
com.foo.android.production.Log.log = function(message){
goog.DEBUG && AndroidLog.e(message);
}
// Export.
goog.exportProperty(com.foo.android.production.Log, "log", com.foo.android.production.Log.log);

I have modified a compiler and packaged it as an npm package.
You can get it here: https://github.com/thanpolas/superstartup-closure-compiler#readme
It will strip all logging messages during compilation

Javascript array : why is this not valid?

I have the following working code :
var routes = [];
Eclipse validator for javascript prints the following warning :
Type mismatch: cannot convert from any[] to any
What is wrong with my empty array ?
Edit : the warning disappeared later. Apparently Eclipse was wrong and the question needs to be closed. Sorry about that.

Your JavaScript is valid, the problem is with JSDT plugin for Eclipse. In the latest version they introduced a type verification which is problematic in many situations - not only for empty arrays (like in your case). Another typical case may look like this: a = b || c;
The plugin will complain when b and c are of different types (which is absolutely valid code for JavaScript). There is several bugs already reported to JSDT developers about this problem, but the issues are not fixed yet.
Unfortunately currently it is not possible to switch off the type verification using JSDT configuration screen in Eclipse. I switched it off directly from the JSDT source code. To do this, please follow these steps:
Download the JSDT source code from Eclipse WebTools Project
Open the org.eclipse.wst.jsdt.debug.core project with Eclipse. Make sure you have Eclipse SDK installed. It might also be required to adjust some dependencies in the plugin.xml file.
The type verification is located in computeSeverity method of ProblemReporter class.
To switch off type verification replace the line: case IProblem.TypeMismatch: return ProblemSeverities.Warning; with case IProblem.TypeMismatch: return ProblemSeverities.Ignore;
Build the project and close Eclipse.
In Eclipse folder find the file named org.eclipse.wst.jsdt.core<version>.jar - make a safe copy of it, then open the jar file and replace the ProblemReporter.class file with the one you compiled in the step 5 (the file is in bin folder of your project).
Start Eclipse and clean your JavaScript project. All type checking will be ignored by JSDT.
Important! Make sure you've downloaded the same version of JSDT that you are using in Eclipse. Eventually instead of replacing a single file you can replace the entire plugin.
If you don't want to download and compile the plugin by yourself you can try with my fixed version. I've placed it on my FunctionSack webpage. I am using Eclipse 3.7 (Indigo) with JSDT 1.3.0, so make sure you have similar configuration if you want to use my file.

The eclipse's web tools platform plugin (wtp) includes a JavaScript validator that is somewhat allergic to the object literal "{}" and array literal "[]" notations, it also shows up some other annoying 'problems' such as 'missing semicolon' etc.
I have found the best solution for me and for my nerves is to disable the wtp's-embedded JavaScript validation completely and use a third-party plug-in.
Surprisingly it's not that easy to disable JavaScript validator. Every eclipse versions requires a different approach, so try the following guide:
In Eclipse prior to version 3.6 it was possible to disable javascript
validation via
'Window->Preferences->JavaScript->Validator->Errors/Warnings->[ ]
Enable JavaScript Semantic validation" - but this doesn't seem to
work in 3.7 Indigo see the eclipse bug
In 3.7 Indigo try Project -> Properties -> Builders - > [ ] JavaScript Validator
If doesn't help, try Project -> Properties -> JavaScript -> Include Path -> Source -> Excluded -> Edit -> Exclusion Patterns -> Edit -> */
If nothing above helps, open .project file and delete/comment out "<nature>org.eclipse.wst.jsdt.core.jsNature</nature>" line
After disabling the wtp validator you can try using a third party tool such as jsLint/jsHint

As what I observed in my testing so far, the problem occurs when you define a local variable in a function which body following a return keyword. This scenario can be shown in the following example (assuming the code is in a top level JavaScript file, means not inside any module/function so the first a is defined in global scope):
var a=[]; //Global variable assignment, no warnings
function f1(){ //global function
var a=[]; //level 1 local variable, no warnings
return a;
}
function f2(){ //local functions and member functions
var f = function(){
var a=[]; // no warinings
return a;
};
this.f = function(){
var a=[]; //no warnings
return a;
};
return f; //returning a defined funciton is OK
}
function f3(){ //returning a function
return function(){
var a=[]; //warning: Type mismatch: cannot convert from any[] to any
return a;
};
}
So the workaround is simple: change f3 to
function f3(){ //returning a defined function
var f = function(){
var a=[]; //warning is gone!
return a;
};
return f;
}

It's valid Javascript (assuming you're not writing it in some wierd context like the middle of an expression :P) so either the "Eclipse validator for javascript" is broken, or you're not using the "Eclipse validator for javascript" after all.

This is completely valid JS and sounds like Eclipse may be using the incorrect syntax plugin or something is ... well ... wrong.
You can confirm this by trying...
var routes = [];
routes.push({ url: '/' });
console.log(routes.length);