Lädt...


🔧 Using Your Own Node Modules With Playwright


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Most of the time your supporting Playwright code will probably live side by side in directories next to your spec files. However, if you need to share your supporting code with other teams or release it to the public, you may consider using a Node module.

I did just this to share UI, API, and load libraries of supporting Playwright code with other teams. They all had their own repositories and CI/CD pipelines and did not want to clone the test repository and deal with it. Publishing as node packages to a private registry seemed like a good solution. This way other teams could just pull them in like any other module. However, there were complications:

  • VS code and linters wanted the modules to be in ESM format
  • Playwright wanted the modules to be in CJS format
  • You need type files for intellisense

It took a lot of experimenting, borrowing from other open source projects, and swearing in order to get something that fixed all of these. Hopefully I can save you some of that pain with this article.

Much of this article overlaps with my earlier one on setting something similar up for K6

Overview

Here is a slightly simplified version of the Playwright setup I created:

There is sample code you can refer to at my playwright-template-complex-dev respository which covers all sections of this article. It is a simplified version of the diagram below.

UML diagram of a simplified code setup

There are three custom libraries which reside in their own repositories. The data library are container objects for various app entities. This creates a standard way to pass things around among the various parts. The UI library abstracts UI actions and implements the Playwright ones at a low level. The API library constructs and executes product specific API calls.

These three libraries are published to a private NPM repository. The Playwright code pulls from this, as well as the public repository, for the libraries it needs. It can also import any local files specific to its tests.

I won't cover how to set things up to access a private NPM registry since it depends on a lot of things outside the scope of this article.

Building You Own Node modules

I found you had to compile and bundle your package correctly or you would have issues with your IDE not recognizing types, Playwright not compiling properly, or Playwright blowing up when it tried to run your script. Again, I am working from memory so hopefully I have captured all of the details.

In my example each custom library was originally it was in it's own repository and published as an NPM package to a private registry. However, in the example they are just other directories for simplicity.

The idea is you need both the CSJ and ESM versions in the package. Typescript and modern Javascript want the ESM versions for use with 'import', but Playwright wants the older CJS version for use with 'require' in its compilation process.

How to do it

You will want to have this in your package.json file:

    "type": "commonjs",
    "main": "dist/cjs/index.js",
    "module": "dist/esm/index.mjs",
    "types": "index.d.ts",
    "typesVersions": {
        "*": {
            "somedir/*": [
                "dist/types/somedir/*.d.ts"
            ],
        }
    },
    "exports": {
        ".": {
            "types": "./dist/types/index.d.ts",
            "import": "./dist/esm/index.js",
            "require": "./dist/cjs/index.js"
        },
        "./somedir/*": {
            "types": "./dist/types/somedir/*.d.ts",
            "import": "./dist/esm/somedir/*.js",
            "require": "./dist/cjs/somedir/*.js"
        },
        "./package.json": "./package.json"
    },
    "files": [
        "dist",
        "tsconfig.json"
    ],

The two blocks with "somedir" will need to be repeated for each directory within your package. These additions tell how to find the CJS and ESM versions of your modules files as well as the type files for each.

You also will need an /index.ts file in your source root that exports every file in your modules. For the example above, this could look something like:

export * from './somedir/xyzzy'
export * from './somedir/plugh'
export { default as FrobozzService } from './somedir/frobozz.service'

I ended up borrowing and modifying a build script from the FakerJS project for building and bundling. To build you need to make the CJS version, the ESM version, and put a copy of the CSJ version in the ESM directory.

Once all of this built, you can publish and import into Playwright with no issues. Playwright should also not complain when you run your script and everything is compiled.

Conclusion

Packaging your Playwright code into node modules for use by Playwright and an IDE can be tricky. You will likely need to include ESM and CSJ versions of your code to satisfy both contexts.

Setting up your development environment to accomplish this is not too difficult. It mainly requires the use of a bundler configured to pull in the proper files and deal with them. When using you own node modules, however, you must make sure you build them correctly or issues will arise with your IDE, webpack, or Playwright.

...

🔧 Using Your Own Node Modules With Playwright


📈 49.07 Punkte
🔧 Programmierung

🔧 Accelerate Your Playwright Test Suite with Microsoft Playwright Testing


📈 34.49 Punkte
🔧 Programmierung

🎥 Playwright Testing and GitHub Actions Tutorial: Run Your Playwright Tests on Every Code Commit


📈 34.49 Punkte
🎥 Video | Youtube

🔧 Introducing Auto Playwright: Transforming Playwright Tests with AI


📈 31.67 Punkte
🔧 Programmierung

🔧 How you can create your own custom chatbot with your own custom data using Google Gemini API all for free


📈 25.61 Punkte
🔧 Programmierung

🪟 Microsoft wants to let you dub videos using your own voice in your own language, new patent reveals


📈 25.61 Punkte
🪟 Windows Tipps

🔧 Building a RESTful API with Node.js: A Step-by-Step Guide - Part Two - Node Modules


📈 25.35 Punkte
🔧 Programmierung

🕵️ Node.js third-party modules: [node-df] RCE via insecure command concatenation


📈 25.35 Punkte
🕵️ Sicherheitslücken

🔧 Pong in my own language in my own graphics library in my own game


📈 23.85 Punkte
🔧 Programmierung

🐧 Huawei releases it's own desktop PC with their own OS based on Linux and their own ARM CPU.


📈 23.85 Punkte
🐧 Linux Tipps

🕵️ GitHub - ZehMatt/zasm-modules: Generating binary modules with zasm


📈 22.86 Punkte
🕵️ Reverse Engineering

🔧 Practical C++20 Modules and the future of tooling around C++ Modules with Cameron DaCamara


📈 22.86 Punkte
🔧 Programmierung

🕵️ CVE-2024-25298 | REDAXO 5.15.1 modules.modules.php information disclosure


📈 22.86 Punkte
🕵️ Sicherheitslücken

🔧 Cypress vs. Playwright for Node: A Head-to-Head Comparison


📈 22.79 Punkte
🔧 Programmierung

🔧 Using Node Modules in Deno


📈 22.47 Punkte
🔧 Programmierung

🔧 Using Node Modules in Deno


📈 22.47 Punkte
🔧 Programmierung

🕵️ Node.js third-party modules: Denial Of Service in Strapi Framework using argument injection


📈 22.47 Punkte
🕵️ Sicherheitslücken

🕵️ Node.js third-party modules: Path traversal using symlink


📈 22.47 Punkte
🕵️ Sicherheitslücken

🔧 Multi-Modules Architecture: Dependency Management _ Build your own gradle plugin


📈 22.2 Punkte
🔧 Programmierung

🔧 Make Your Own Server Using Express.js and Node.js


📈 21.8 Punkte
🔧 Programmierung

🔧 How to Create Your Own Job Board Web App Using React.js, Node.js, SerpApi, and MUI


📈 21.8 Punkte
🔧 Programmierung

🔧 Running and Creating Your Own LLMs Locally with Node.js API using Ollama


📈 21.8 Punkte
🔧 Programmierung

🪟 Use Beat Saber's Level Editor to create your own tracks with your own music


📈 21.53 Punkte
🪟 Windows Tipps

🎥 Install Node Modules in your Azure Functions application [8 of 16] | Beginner's Series to Serverless


📈 21.21 Punkte
🎥 Video | Youtube

🔧 How to Manage Your Node.js Versions Using the Node Version Manager (NVM)


📈 20.81 Punkte
🔧 Programmierung

🎥 Live demo of automated cloud application testing using Azure and Playwright


📈 19.91 Punkte
🎥 Video | Youtube

🔧 Visual Regression Testing Using Playwright


📈 19.91 Punkte
🔧 Programmierung

🔧 Part 4 - Using Cursor and Claude to Create Automated Tests with Playwright


📈 19.91 Punkte
🔧 Programmierung

🔧 Server Side Mocking for Playwright in NextJS (App Router) using Mock Service Worker


📈 19.91 Punkte
🔧 Programmierung

🔧 Automation using Playwright and TypeScript and JavaScript


📈 19.91 Punkte
🔧 Programmierung

🔧 How I automated the booking of CrossFit (or any other group activity) at my gym using Playwright


📈 19.91 Punkte
🔧 Programmierung

🔧 How to test websites: Using SIRV and Playwright for test driven development (TDD)


📈 19.91 Punkte
🔧 Programmierung

matomo