diff --git a/README.md b/README.md index f3ae6c48..49b49afc 100644 --- a/README.md +++ b/README.md @@ -290,6 +290,9 @@ npx @playwright/mcp@latest --config path/to/config.json // Remote Playwright server endpoint remoteEndpoint?: string; + + // testIdAttribute to use. Defaults to "data-testid" + testIdAttribute?: string; }, // Server configuration diff --git a/config.d.ts b/config.d.ts index a9359187..3ed8a2ef 100644 --- a/config.d.ts +++ b/config.d.ts @@ -68,6 +68,11 @@ export type Config = { * Remote endpoint to connect to an existing Playwright server. */ remoteEndpoint?: string; + + /** + * The attribute to use for test IDs. Defaults to "data-testid". + */ + testIdAttribute?: string; }, server?: { diff --git a/src/context.ts b/src/context.ts index ecf66b95..2bca84e5 100644 --- a/src/context.ts +++ b/src/context.ts @@ -346,6 +346,8 @@ ${code.join('\n')} sources: false, }); } + if (this.config.browser?.testIdAttribute) + playwright.selectors.setTestIdAttribute(this.config.browser.testIdAttribute); return result; } } diff --git a/tests/core.spec.ts b/tests/core.spec.ts index a35e7ed0..b56af5fe 100644 --- a/tests/core.spec.ts +++ b/tests/core.spec.ts @@ -70,6 +70,79 @@ await page.getByRole('button', { name: 'Submit' }).click(); `); }); +test('browser_click with testid', async ({ client, server }) => { + server.setContent('/', ` + Title + + `, 'text/html'); + + await client.callTool({ + name: 'browser_navigate', + arguments: { url: server.PREFIX }, + }); + + expect(await client.callTool({ + name: 'browser_click', + arguments: { + element: 'Submit button', + ref: 'e2', + }, + })).toHaveTextContent(` +- Ran Playwright code: +\`\`\`js +// Click Submit button +await page.getByTestId('submit-btn').click(); +\`\`\` + +- Page URL: ${server.PREFIX} +- Page Title: Title +- Page Snapshot +\`\`\`yaml +- button "Submit" [ref=e2] +\`\`\` +`); +}); + +test('browser_click with custom testid', async ({ startClient, server }) => { + const { client } = await startClient({ + config: { + browser: { + testIdAttribute: 'data-custom-testid', + } + } + }); + server.setContent('/', ` + Title + + `, 'text/html'); + + await client.callTool({ + name: 'browser_navigate', + arguments: { url: server.PREFIX }, + }); + + expect(await client.callTool({ + name: 'browser_click', + arguments: { + element: 'Submit button', + ref: 'e2', + }, + })).toHaveTextContent(` +- Ran Playwright code: +\`\`\`js +// Click Submit button +await page.getByTestId('submit-btn').click(); +\`\`\` + +- Page URL: ${server.PREFIX} +- Page Title: Title +- Page Snapshot +\`\`\`yaml +- button "Submit" [ref=e2] +\`\`\` +`); +}); + test('browser_select_option', async ({ client, server }) => { server.setContent('/', ` Title