diff --git a/apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx b/apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx index f301f9d11..1cb7de56c 100644 --- a/apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx +++ b/apps/playground/src/components/Header/InstrumentSelector/InstrumentSelector.tsx @@ -49,6 +49,7 @@ export const InstrumentSelector = () => { {instruments.map((instrument) => ( { setSelectedInstrument(id); diff --git a/testing/src/pages/playground/index.page.ts b/testing/src/pages/playground/index.page.ts index 2a3f01d16..67fbf8388 100644 --- a/testing/src/pages/playground/index.page.ts +++ b/testing/src/pages/playground/index.page.ts @@ -23,12 +23,10 @@ export class PlaygroundPage { await this.$ref.goto(url); } - /** - * Picks an example or template from the header's instrument list by its label. The list's search - * box matches on instrument ids rather than labels, so the option is clicked without filtering. - */ + /** Picks an example or template from the header's instrument list by its label. */ async selectInstrument(label: string): Promise { await this.$ref.getByRole('combobox', { name: 'Load an instrument...' }).click(); + await this.$ref.getByPlaceholder('Search...').fill(label); await this.$ref.getByRole('option', { exact: true, name: label }).click(); } } diff --git a/testing/src/specs/playground.spec.ts b/testing/src/specs/playground.spec.ts index 0a143a0d3..481250036 100644 --- a/testing/src/specs/playground.spec.ts +++ b/testing/src/specs/playground.spec.ts @@ -106,6 +106,15 @@ test.describe('playground', () => { test.describe.configure({ mode: 'default' }); test.slow(); + test('should find an instrument by its visible label in the selector', async ({ page }) => { + const playground = new PlaygroundPage(page); + await playground.goto(); + + await page.getByRole('combobox', { name: 'Load an instrument...' }).click(); + await page.getByPlaceholder('Search...').fill('Form Reference'); + await expect(page.getByRole('option', { exact: true, name: 'Form Reference' })).toBeVisible(); + }); + test('should run the preview on an origin other than the editor and render the instrument there @smoke', async ({ page }) => {