{"id":15012867,"url":"https://github.com/remcohaszing/playwright-monaco","last_synced_at":"2026-02-27T08:05:58.638Z","repository":{"id":64920086,"uuid":"579063192","full_name":"remcohaszing/playwright-monaco","owner":"remcohaszing","description":"Test Monaco editor integrations using Playwright","archived":false,"fork":false,"pushed_at":"2024-06-07T14:32:07.000Z","size":665,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T19:43:37.984Z","etag":null,"topics":["monaco","monaco-editor","playwright","testing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remcohaszing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"remcohaszing"}},"created_at":"2022-12-16T15:08:41.000Z","updated_at":"2024-06-07T14:32:11.000Z","dependencies_parsed_at":"2024-10-20T20:04:57.236Z","dependency_job_id":null,"html_url":"https://github.com/remcohaszing/playwright-monaco","commit_stats":{"total_commits":44,"total_committers":1,"mean_commits":44.0,"dds":0.0,"last_synced_commit":"f7f67f39b7a93181449843e3677bd37f7953d6c6"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/remcohaszing/playwright-monaco","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fplaywright-monaco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fplaywright-monaco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fplaywright-monaco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fplaywright-monaco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remcohaszing","download_url":"https://codeload.github.com/remcohaszing/playwright-monaco/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fplaywright-monaco/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29888149,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T07:54:54.515Z","status":"ssl_error","status_checked_at":"2026-02-27T07:54:49.177Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["monaco","monaco-editor","playwright","testing"],"created_at":"2024-09-24T19:43:21.195Z","updated_at":"2026-02-27T08:05:58.622Z","avatar_url":"https://github.com/remcohaszing.png","language":"TypeScript","funding_links":["https://github.com/sponsors/remcohaszing"],"categories":[],"sub_categories":[],"readme":"# playwright-monaco\n\n[![github actions](https://github.com/remcohaszing/playwright-monaco/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/playwright-monaco/actions/workflows/ci.yaml)\n[![npm version](https://img.shields.io/npm/v/playwright-monaco)](https://www.npmjs.com/package/playwright-monaco)\n[![npm downloads](https://img.shields.io/npm/dm/playwright-monaco)](https://www.npmjs.com/package/playwright-monaco)\n[![codecov](https://codecov.io/gh/remcohaszing/playwright-monaco/branch/main/graph/badge.svg)](https://codecov.io/gh/remcohaszing/playwright-monaco)\n\nTest [Monaco editor](https://microsoft.github.io/monaco-editor) integrations using\n[Playwright](https://playwright.dev).\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [`createServer(entryPoints[, options])`](#createserverentrypoints-options)\n  - [`monaco`](#monaco)\n  - [`ed`](#ed)\n  - [`test(name, fn)`](#testname-fn)\n  - [`editor` fixture](#editor-fixture)\n  - [`trigger(handlerId[, payload])`](#triggerhandlerid-payload)\n  - [`waitForMarkers(uri, fn)`](#waitformarkersuri-fn)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install playwright-monaco\n```\n\n## Usage\n\nFirst, create an entry point that sets up your Monaco editor integration. Your integration should\nnot import Monaco editor. Instead, it should accept the Monaco editor module as an argument. This\nbest practice makes sure your integration also works with other ways to load Monaco editor. For\nexample many users load Monaco editor from a CDN. The `ed` and `monaco` variables are assigned\nglobally for convenience, but you can import them for type safety.\n\n```typescript\n// ./tests/setup-monaco.ts\nimport { ed, monaco } from 'playwright-monaco'\n\nimport { configure } from '../src/index.js'\n\nconfigure(monaco)\n```\n\nIn your Playwright config, call `createServer` with your entry points. This starts a webserver using\nesbuild [serve](https://esbuild.github.io/api/#serve). This serves a page containing a fully\nconfigured Monaco editor. All default web workers are configured and a full page editor instance is\ncreated.\n\n```typescript\n// ./playwright.config.ts\nimport { type PlaywrightTestConfig } from '@playwright/test'\nimport { createServer } from 'playwright-monaco'\n\nconst config: PlaywrightTestConfig = {\n  use: {\n    baseURL: await createServer('./tests/setup-monaco')\n    // Alternatively, if you need a web worker\n    // baseURL: await createServer({\n    //   setup: './tests/setup-monaco',\n    //   'your-integration': './src/your-integration.worker'\n    // })\n\n    // The editor respects dark mode if configured\n    //  colorScheme: 'dark'\n  }\n}\n\nexport default config\n```\n\nNow create a test which uses the `editor` fixture. The `editor` fixture navigates to the page\nserved, and contains some convenience functions for working with Monaco editor.\n\n```typescript\n// ./tests/integration.spec.ts\nimport { test } from 'playwright-monaco'\n\ntest('your integration', async ({ editor }) =\u003e {\n  await editor.createModel('console.log(\"Hello Monaco!\")\\n', 'file:///index.js', true)\n})\n```\n\n## API\n\n### `createServer(entryPoints[, options])`\n\nCreate an esbuild dev server which serves Monaco editor.\n\n#### Parameters:\n\n- `entryPoints`: A string or object that contains the `setup` key. These entry points will be built\n  and loaded using esbuild.\n- `options`: Optional additional configuration options. The following options are accepted:\n  - `alias`: Substitute packages with an alternative.\n  - `port`: The port on which to serve the page.\n\n### `monaco`\n\nThe global Monaco editor module. This can only be used in the browser.\n\n### `ed`\n\nThe global Monaco editor instance. This can only be used in the browser.\n\n### `test(name, fn)`\n\nA Playwright [test](https://playwright.dev/docs/writing-tests) instance that has been extended with\nthe `editor` fixture.\n\n### `editor` fixture\n\nThe `editor` fixture is a Playwright [handle](https://playwright.dev/docs/handles) attached to the\n`window`. It’s configured to allow type-safe access to the `ed` and `monaco` globals as well. In\naddition, the `editor` fixture has the following helper functions:\n\n#### `createModel(value[, pathOrUri[, open[, language]]])`\n\nCreate a Monaco editor model.\n\n##### Parameters\n\n- `value`: The value to set. (`string`)\n- `pathOrUri`: The path or uri of the model. If a path is given, it will be converted to a file uri.\n  (`URL` | `string`)\n- `open`: If set to true, the created model is opened in the editor. (`boolean`)\n- `language`: The model language. By default this is auto detected based on the uri. (`string`)\n\n##### Returns\n\nA Playwright handle for the model.\n\n#### `open(patterns[, options])`\n\nOpen one or more files from the file system in Monaco editor.\n\n##### Parameters\n\n- `pattern`: A glob pattern or array of glob patterns to open in the editor. (`string` | `string[]`)\n- `options`: Options to pass to globby. The `cwd` option is also used to determine the base path of\n  the models. See [globby options](https://github.com/sindresorhus/globby#options) for details.\n  (`object`)\n\n#### `setModel(uri)`\n\nOpen an existing model in the editor.\n\n##### Parameters\n\n- `uri`: The uri of the model to open. (`string`)\n\n#### `setPosition(position)`\n\nSet the position in the editor\n\n#### Parameters\n\n- `position`: THe position to set. (`object`)\n\n### `trigger(handlerId[, payload])`\n\nTrigger an editor action.\n\n#### Parameters\n\n- `handlerId`: The id of the action to trigger. (`string`)\n- `payload`: An additional payload to send with the action. (`any`)\n\n#### Returns\n\nThe result of the action.\n\n### `waitForMarkers(uri, fn)`\n\nWait for marker data to be triggered for a resource.\n\n#### Parameters\n\n- `uri` The resource uri to wait for markers for. (`string`)\n- `fn` A function to evaluate to trigger marker data. (`function`)\n\n#### Returns\n\nMarker data for the uri.\n\n## License\n\n[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fplaywright-monaco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremcohaszing%2Fplaywright-monaco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fplaywright-monaco/lists"}