chore(e2e): Lint for restricted globals in e2e tests #6600
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The WebdriverIO API allows for execution of serialized JavaScript functions in the browser via the
browser.execute
method. We're currently using this. To get typescript support for this, our tsconfig includes"dom"
as alib
, which has the unfortunate drawback that the types for DOM globals become available to all the code, which is running on Node.js and doesn't have values for these available at runtime.This is an issue first and foremost because the usefulness of TypeScript degrades fast when you cannot trust it and most recently when I wanted to use the
fetch
implementation built into Node.js, as the DOM'sfetch
declaration overlap and differ slightly.TLDR; It's not trivial to restrict access to these types
In situations like this, I've reached for a multi-project setup using TypeScript references in the past: They can specify subsets of files which are allowed access to types based on specific TypeScript configs.This won't work in this particular situation however, because:
browser.execute
is inlined with other code which is not allowed to access DOM APIs and the tsconfigs can't control types at the granularity of blocks of code. This could be worked around by extracting these functions into separate files with a known extension (such aswhatever.dom.ts
) which would indicate code which would be unrestricted from accessing DOM globals, but this does come with a drawback of decreased cohesion between the function and the code calling ti.noEmit: false
oremitOnlyDeclaration: true
, meaning they will emit code, which is not ideal in our scenario, as we're usingts-node
to strip types and interpret the code without an explicit build step.My proposal for an interim solution is inspired by this comment, where the
"globals"
package is used in conjunction with the"no-restricted-globals"
eslint rule to produce errors and warnings when accessing DOM-only globals.Merging this PR will:
browser.execute
calls.browser.execute
calls.Checklist
Motivation and Context
Open Questions
Dependents
Types of changes