Giter Club home page Giter Club logo

karma-webkit-launcher's Introduction

karma-webkit-launcher

Build status: Playwright (MacOS) Build status: Playwright (Ubuntu) Build status: Playwright (Windows) Build status: Epiphany NPM version

NPM

Karma Launcher for Apple's Webkit

Installation

The easiest way is to keep karma-webkit-launcher as a devDependency in your package.json, by running

npm install karma-webkit-launcher --save-dev

Supported WebKit-Launcher

This karma-webkit-launcher provides the following browser launcher.

Karma Runner Browsers ENV Type CI note
WebKit WEBKIT_BIN Native / Playwright / Safari (MacOS only) -
WebKitHeadless WEBKIT_HEADLESS_BIN Native / Playwright -
Safari SAFARI_BIN Native MacOS only not supported
Epiphany EPIPHANY_BIN Native Ubuntu only needs xvfb-run

Configuration

For the configuration just add Webkit or WebkitHeadless in your browser list.

// karma.conf.js
export default (config) => {
  config.set({
    browsers: ['Webkit'],  // You may use 'WebkitHeadless' or other supported browser

You can pass the list of browsers as a CLI argument too:

karma start --browsers Webkit

Headless Webkit with Playwright / Playwright-Webkit

Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Headless execution is supported for all the browsers on all platforms. Check out system requirements for details.

If no environment variable is set and Playwright is available, it will be automatically utilized. Additionally, if you exclusively intend to perform WebKit testing, you can install 'playwright-webkit' exclusively for that purpose.

Example Usage

Installing Playwright and karma-webkit-launcher

npm install playwright karma-webkit-launcher --save-dev

Example Karma configuration

// karma.conf.js
module.exports = function (config) {
  config.set({
    browsers: ["WebkitHeadless"],
  });
};

Manually define Playwright executable

To force the use of Playwright over an local Webkit instance, just overwrite the WEBKIT_HEADLESS_BIN or WEBKIT_BIN environment variable.

// karma.conf.js
import playwright from "playwright";
process.env.WEBKIT_HEADLESS_BIN = playwright.webkit.executablePath();

module.exports = function (config) {
  config.set({
    browsers: ["WebkitHeadless"],
  });
};

Advanced Topics

Detected if Safari or Playwright is used

In some instances it is helpful to detect if Playwright or a real Safari Browser is used. For this reason it's possible to detect which kind of browser is currently running the tests over this runner.

if (
  new URLSearchParams(document.referrer || window.location.search).get(
    "test_browser"
  ) == "Playwright"
) {
  // Playwright specific tests
}

See: Playwright Karma Test

if (
  new URLSearchParams(document.referrer || window.location.search).get(
    "test_browser"
  ) == "Safari"
) {
  // Safari specific tests
}

See: Safari Karma Test

For more information on Karma see the Karma Homepage.

karma-webkit-launcher's People

Contributors

m-akinc avatar markusbordihn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

karma-webkit-launcher's Issues

Process doesn't automatically close on exit

Thanks for making this launcher.

It works great except for one issue.

On my Mac, the process seems to stay open even after Karma has finished running, and I have to kill it using "killall Playwright."

If I get around to trying to fix it myself, I'll open a PR.

`test_browser` value incorrectly `Safari` instead of `Playwright`

A follow-up to #2:

I tested the changes from #2 by copying index.js from main to my local node_modules/karma-webkit-launcher and I do see test_browser being added, although the value is incorrectly set to Safari instead of Playwright. Note that I'm using the playwright-webkit package, not playwright but that shouldn't matter as ms-playwright is still part of the path; a relevant part of the ps axo pid,ppid,tty,user,group,time,pcpu,pmem,args output:

  PID  PPID TTY      USER               GID      TIME  %CPU %MEM ARGS
 9248     1 ??       mgolebiowski        20   0:01.56  38.5  0.4 /Users/mgolebiowski/Library/Caches/ms-playwright/webkit-1751/com.apple.WebKit.WebContent.xpc/Contents/MacOS/com.apple.WebKit.WebContent.Development
 9251     1 ??       mgolebiowski        20   0:00.50  11.6  0.1 /Users/mgolebiowski/Library/Caches/ms-playwright/webkit-1751/com.apple.WebKit.Networking.xpc/Contents/MacOS/com.apple.WebKit.Networking.Development
 9184  9119 ttys024  mgolebiowski        20   0:00.01   0.0  0.0 /bin/bash /Users/mgolebiowski/Library/Caches/ms-playwright/webkit-1751/pw_run.sh http://localhost:9876/?id=86812371 --user-data-dir=/var/folders/ph/_0txk5ls3zxbzkb_7y97_j4r0000gp/T/ec1502b8-4809-461a-8ae6-4db2b99028f6 --headless --disable-gpu
 9189  9184 ttys024  mgolebiowski        20   0:00.75   3.4  0.2 /Users/mgolebiowski/Library/Caches/ms-playwright/webkit-1751/Playwright.app/Contents/MacOS/Playwright http://localhost:9876/?id=86812371 --user-data-dir=/var/folders/ph/_0txk5ls3zxbzkb_7y97_j4r0000gp/T/ec1502b8-4809-461a-8ae6-4db2b99028f6 --headless --disable-gpu

Headless mode not working in karma-webkit-launcher 1.2.0

I updated karma-webkit-launcher from 1.1.0 to 1.2.0 to get a resolution for #1 in my jQuery PR that I mentioned in #2 but now WebkitHeadless is no longer headless - a regular window appears.

You can test that easily on macOS by checking out my jQuery PR: jquery/jquery#5190 and invoking the following in the project directory:

npm install
npx grunt
BROWSERS=WebkitHeadless npx grunt karma:main

Process not exiting on Linux

Describe the bug
On our Linux build agents, the MiniBrowser process does not exit after the npm test command completes. This can interfere with subsequent test runs targeting other browsers, and can also cause the CI testing step to hang.

To Reproduce
Example npm scripts:

"test": "npm run test-webkit && npm run test-chrome",
"test-webkit": "karma start karma.conf.js --browsers=WebkitHeadless --single-run ",
"test-chrome": "karma start karma.conf.js --browsers=ChromeHeadless --single-run",

Expected behavior
The browser process should exit before the karma command completes.

Screenshots
In our actual CI (not simplified scenario described above), tests for multiple projects, using multiple browsers, run concurrently. This is an example snapshot of the processes running at the time the WebkitBrowser kill handler runs:

 PID    PPID COMMAND
7673    7671 npm run test-concurrent (nimble-components)
7716    7673 sh
7729    7716 node
7771    7729 sh
7773    7771 npm run test-chrome:verbose (nimble-components)
7779    7729 sh
7782    7779 npm run test-firefox:verbose (nimble-components)
7783    7729 sh
7788    7783 npm run test-webkit:verbose (nimble-components)
7860    7788 sh
7863    7860 node
8259    7863 bash
8274    8259 MiniBrowser  <------------------ live, active instance
8593    8274 WPENetworkProce
8601    8274 WPEWebProcess

7672    7668 npm run test
7997    7672 sh
8602    7997 npm run test-webkit:verbose (spright-components)
8648    8602 sh
8649    8648 node
8680    8649 bash <defunct> <--------------- defunct/zombie bash
8686       1 MiniBrowser    <------------ orphaned webkit browser
8694    8686 WPENetworkProce
8697    8686 WPEWebProcess

Desktop (please complete the following information):
Machine is a GitHub actions agent:
Ubuntu 22.04.4 LTS
Image: ubuntu-22.04
Version: 20240624.1.0

Smartphone (please complete the following information):
N/A

Provide a way to overwrite the user agent

Playwright WebKit as provided by this package has different user agent on macOS:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko)

than on Ubuntu 22.04.1 (e.g. used in GitHub Actions when ubuntu-latest is specified):

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15

Especially the latter version makes it very hard to distinguish from a real Safari version. They can also always change.

I'm trying to hook up WebKit testing in jQuery CI using this package in jquery/jquery#5190. Some of our tests verify whether support tests results match the expected values in each browser. When a browser fixes one of the issues and we test both an old & a new version, we differentiate the assertion using version numbers.

You can see how this gets problematic with the Playwright WebKit user agents. If we were able to overwrite the UA, that would help as I could add the playwright token in there. It'd be ideal - but not fully necessary - if this override was a function that accepts the original UA so that I may tweak it without necessarily fully replacing it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.