Test Monaco editor integrations using Playwright
MIT License
Test Monaco editor integrations using Playwright.
npm install playwright-monaco
First, create an entry point that sets up your Monaco editor integration. Your integration should
not import Monaco editor. Instead, it should accept the Monaco editor module as an argument. This
best practice makes sure your integration also works with other ways to load Monaco editor. For
example many users load Monaco editor from a CDN. The ed
and monaco
variables are assigned
globally for convenience, but you can import them for type safety.
// ./tests/setup-monaco.ts
import { ed, monaco } from 'playwright-monaco'
import { configure } from '../src/index.js'
configure(monaco)
In your Playwright config, call createServer
with your entry points. This starts a webserver using
esbuild serve. This serves a page containing a fully
configured Monaco editor. All default web workers are configured and a full page editor instance is
created.
// ./playwright.config.ts
import { type PlaywrightTestConfig } from '@playwright/test'
import { createServer } from 'playwright-monaco'
const config: PlaywrightTestConfig = {
use: {
baseURL: await createServer('./tests/setup-monaco')
// Alternatively, if you need a web worker
// baseURL: await createServer({
// setup: './tests/setup-monaco',
// 'your-integration': './src/your-integration.worker'
// })
// The editor respects dark mode if configured
// colorScheme: 'dark'
}
}
export default config
Now create a test which uses the editor
fixture. The editor
fixture navigates to the page
served, and contains some convenience functions for working with Monaco editor.
// ./tests/integration.spec.ts
import { test } from 'playwright-monaco'
test('your integration', async ({ editor }) => {
await editor.createModel('console.log("Hello Monaco!")\n', 'file:///index.js', true)
})
createServer(entryPoints[, options])
Create an esbuild dev server which serves Monaco editor.
entryPoints
: A string or object that contains the setup
key. These entry points will be builtoptions
: Optional additional configuration options. The following options are accepted:
alias
: Substitute packages with an alternative.port
: The port on which to serve the page.monaco
The global Monaco editor module. This can only be used in the browser.
ed
The global Monaco editor instance. This can only be used in the browser.
test(name, fn)
A Playwright test instance that has been extended with
the editor
fixture.
editor
fixtureThe editor
fixture is a Playwright handle attached to the
window
. It’s configured to allow type-safe access to the ed
and monaco
globals as well. In
addition, the editor
fixture has the following helper functions:
createModel(value[, pathOrUri[, open[, language]]])
Create a Monaco editor model.
value
: The value to set. (string
)pathOrUri
: The path or uri of the model. If a path is given, it will be converted to a file uri.URL
| string
)open
: If set to true, the created model is opened in the editor. (boolean
)language
: The model language. By default this is auto detected based on the uri. (string
)A Playwright handle for the model.
open(patterns[, options])
Open one or more files from the file system in Monaco editor.
pattern
: A glob pattern or array of glob patterns to open in the editor. (string
| string[]
)options
: Options to pass to globby. The cwd
option is also used to determine the base path ofobject
)setModel(uri)
Open an existing model in the editor.
uri
: The uri of the model to open. (string
)setPosition(position)
Set the position in the editor
position
: THe position to set. (object
)trigger(handlerId[, payload])
Trigger an editor action.
handlerId
: The id of the action to trigger. (string
)payload
: An additional payload to send with the action. (any
)The result of the action.
waitForMarkers(uri, fn)
Wait for marker data to be triggered for a resource.
uri
The resource uri to wait for markers for. (string
)fn
A function to evaluate to trigger marker data. (function
)Marker data for the uri.