From 72496230b0d660c27165b084eee061958dd1de8d Mon Sep 17 00:00:00 2001 From: AgnesToulet <35176601+AgnesToulet@users.noreply.github.com> Date: Fri, 12 Sep 2025 16:29:21 +0200 Subject: [PATCH 1/7] Add frameLocator API docs --- .../k6-browser/framelocator/_index.md | 20 ++ .../k6-browser/framelocator/getbyalttext.md | 176 ++++++++++++++ .../k6-browser/framelocator/getbylabel.md | 195 +++++++++++++++ .../framelocator/getbyplaceholder.md | 105 ++++++++ .../k6-browser/framelocator/getbyrole.md | 224 ++++++++++++++++++ .../k6-browser/framelocator/getbytestid.md | 83 +++++++ .../k6-browser/framelocator/getbytext.md | 123 ++++++++++ .../k6-browser/framelocator/getbytitle.md | 109 +++++++++ .../k6-browser/framelocator/locator.md | 52 ++++ 9 files changed, 1087 insertions(+) create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/_index.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyplaceholder.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyrole.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytestid.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytext.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytitle.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/framelocator/locator.md diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/_index.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/_index.md new file mode 100644 index 0000000000..72b4610574 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/_index.md @@ -0,0 +1,20 @@ +--- +title: 'FrameLocator' +description: 'Browser module: FrameLocator Class' +weight: 10 +--- + +# FrameLocator + +FrameLocator represents a view to an `iframe` on the page. It captures the logic sufficient to retrieve the `iframe` and locate elements in that `iframe`. FrameLocator can be created with `locator.contentFrame()` method. + +| Method | Description | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [getByAltText(altText[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyalttext/) | Returns a locator for elements with the specified `alt` attribute text. | +| [getByLabel(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbylabel/) | Returns a locator for form controls with the specified label text. | +| [getByPlaceholder(placeholder[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyplaceholder/) | Returns a locator for input elements with the specified `placeholder` attribute text. | +| [getByRole(role[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyrole/) | Returns a locator for elements with the specified ARIA role. | +| [getByTestId(testId)](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytestid/) | Returns a locator for elements with the specified `data-testid` attribute. | +| [getByText(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytext/) | Returns a locator for elements containing the specified text. | +| [getByTitle(title[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytitle/) | Returns a locator for elements with the specified `title` attribute. | +| [locator(selector)](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/locator) | Returns a [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator) for the given `selector`. | \ No newline at end of file diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md new file mode 100644 index 0000000000..ea86a47b3f --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md @@ -0,0 +1,176 @@ +--- +title: 'getByAltText(altText[, options])' +description: 'Browser module: frameLocator.getByAltText(altText[, options]) method' +--- + +# getByAltText(altText[, options]) + +Returns a locator for elements with the specified alt text. This method is useful for locating images and other elements that have an `alt` attribute, making your tests more accessible and user-focused. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------- | +| `altText` | string \| RegExp | - | Required. The alt text to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the alt text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with elements matching the specified alt text. | + +## Examples + +### Basic alt text matching + +Find and click an image by its alt text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + `); + + const logo = page.locator('#my_frame').contentFrame().getByAltText('LOGO'); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +### Exact alt text matching + +Use exact matching for precise alt text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + `); + + const logo = page.locator('#my_frame').contentFrame().getByAltText('logo', { exact: true }); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +### Using regular expressions + +Find images using pattern matching: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + `); + + const logo = page.locator('#my_frame').contentFrame().getByAltText(/logo/s); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +## Common use cases + +- **Image testing:** + - Testing image alt text for accessibility compliance + - Interacting with clickable images/banners +- **Accessibility testing:** + - Ensuring all images have meaningful alt text + - Testing screen reader compatibility + - Validating WCAG compliance +- **UI interaction:** + - Clicking on logo images to navigate home + - Selecting images in galleries or carousels + - Interacting with image-based buttons + +## Best practices + +1. **Use descriptive alt text**: When creating tests, ensure your application uses meaningful alt text that describes the image content or function. +1. **Prefer exact matches**: Use `exact: true` when you need precise matching to avoid false positives. +1. **Accessibility-first**: Using `getByAltText()` encourages better accessibility practices by ensuring images have proper alt attributes. +1. **Regular expressions for patterns**: Use RegExp for flexible matching when dealing with dynamic or numbered content. +1. **Combine with assertions**: Always verify that the located elements behave as expected using assertions. + +## Related + +- [frameLocator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyrole/) - Locate by ARIA role +- [frameLocator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbylabel/) - Locate by form labels +- [frameLocator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyplaceholder/) - Locate by placeholder text +- [frameLocator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytestid/) - Locate by test ID +- [frameLocator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytitle/) - Locate by title attribute +- [frameLocator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytext/) - Locate by visible text diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md new file mode 100644 index 0000000000..f16bb3fda3 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md @@ -0,0 +1,195 @@ +--- +title: 'getByLabel(text[, options])' +description: 'Browser module: frameLocator.getByLabel(text[, options]) method' +--- + +# getByLabel(text[, options]) + +Returns a locator for form controls associated with the specified label text. This method is ideal for interacting with form elements in an accessible and user-focused way, as it mirrors how users typically identify form fields. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ | +| `text` | string \| RegExp | - | Required. The label text to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the label text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the form control associated with the specified label. | + +## Examples + +### Basic form interaction + +Fill form fields using their labels: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + const iframeHTML = ` + + + + + `; + + await page.setContent(` + + `); + + const frameLocator = page.locator("#my_frame").contentFrame(); + const username = frameLocator.getByLabel('Username (hint: default)', { exact: true }); + const password = frameLocator.getByLabel(/^Password.*$/); + + await username.fill('default'); + await password.fill('12345678'); + } finally { + await page.close(); + } +} +``` + +### Working with different input types + +Handle various form control types in various label association patterns: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + const iframeHTML = ` + + + Password (hint: 12345678) + + + + + + + + + + + `; + + await page.setContent(` + + `); + + const frameLocator = page.locator("#my_frame").contentFrame(); + + // Inputs + await frameLocator.getByLabel('Username (hint: default)', { exact: true }).fill('default'); + await frameLocator.getByLabel(/^Password.*$/).fill('12345678'); + + // Checkbox + await frameLocator.getByLabel('Subscribe to newsletter').check(); + + // Radio button + await frameLocator.getByLabel('Email', { exact: true }).check(); + + // Select dropdown + await frameLocator.getByLabel('Theme').selectOption('light'); + + // Textarea + await frameLocator.getByLabel('Comments').fill('This is a test comment'); + } finally { + await page.close(); + } +} +``` + +## Label association patterns + +The `getByLabel()` method works with several HTML patterns for associating labels with form controls: + +1. Explicit association with `for` attribute: + + + + ```html + + ``` + +1. ARIA labeling: + + + + ```html + Username + ``` + +1. ARIA label attribute: + + + + ```html + + ``` + +## Common use cases + +- **Form testing**: Login forms, registration forms, contact forms +- **E-commerce**: Checkout forms, shipping information, payment details +- **Settings pages**: User preferences, account settings, configuration forms +- **Accessibility testing**: Ensuring proper label association and screen reader compatibility + +## Best practices + +1. **Accessibility-first approach**: Using `getByLabel()` ensures your tests work the same way users with assistive technology interact with forms. +1. **Meaningful labels**: Encourage developers to use descriptive, unique label text that clearly identifies the form control's purpose. +1. **Required field indicators**: When testing required fields, include any visual indicators (like asterisks) in your label text matching. +1. **Form validation testing**: Use labels to test form validation scenarios, as they provide a stable way to identify fields regardless of styling changes. + +## Related + +- [frameLocator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyrole/) - Locate by ARIA role +- [frameLocator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyalttext/) - Locate by alt text +- [frameLocator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyplaceholder/) - Locate by placeholder text +- [frameLocator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytestid/) - Locate by test ID +- [frameLocator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytitle/) - Locate by title attribute +- [frameLocator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytext/) - Locate by text content diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyplaceholder.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyplaceholder.md new file mode 100644 index 0000000000..ad60cdf219 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyplaceholder.md @@ -0,0 +1,105 @@ +--- +title: 'getByPlaceholder(placeholder[, options])' +description: 'Browser module: frameLocator.getByPlaceholder(placeholder[, options]) method' +--- + +# getByPlaceholder(placeholder[, options]) + +Returns a locator for input elements with the specified `placeholder` attribute. This method is useful for locating form fields that use `placeholder` attribute to provide hints or examples to users about the expected input format. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | +| `placeholder` | string \| RegExp | - | Required. The placeholder text to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the placeholder text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the input elements matching the specified placeholder text. | + +## Example + +Find and fill inputs by their placeholder text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + const iframeHTML = ` + + + + + + `; + + await page.setContent(` + + `); + + const frameLocator = page.locator("#my_frame").contentFrame(); + await frameLocator.getByPlaceholder('First name').fill('First'); + await frameLocator.getByPlaceholder('Last name').fill('Last'); + await frameLocator.getByPlaceholder('dd/mm/yyyy').fill('01/01/1990'); + + await frameLocator.getByPlaceholder('your.email@example.com').fill('first.last@example.com'); + await frameLocator.getByPlaceholder('+1 (555) 123-4567').fill('+1 (555) 987-6543'); + } finally { + await page.close(); + } +} +``` + +## Common use cases + +- **Form field identification:** + - Login and registration forms without explicit labels + - Quick search boxes + - Filter and input controls + - Comment and feedback forms +- **E-commerce:** + - Product search bars + - Quantity input fields + - Promo code entry + - Address and payment information +- **Interactive applications:** + - Chat input fields + - Command input interfaces + - Settings and configuration forms + - Data entry applications + +## Best practices + +1. **Complement, don't replace labels**: Placeholder text should supplement, not replace proper form labels for accessibility. +1. **Use descriptive placeholders**: Ensure placeholder text clearly indicates the expected input format or content. +1. **Consider internationalization**: When testing multi-language applications, be aware that placeholder text may change. +1. **Accessibility considerations**: Remember that placeholder text alone may not be sufficient for users with disabilities. + +## Related + +- [frameLocator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyrole/) - Locate by ARIA role +- [frameLocator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyalttext/) - Locate by alt text +- [frameLocator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbylabel/) - Locate by form labels (preferred for accessibility) +- [frameLocator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytestid/) - Locate by test ID +- [frameLocator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytitle/) - Locate by title attribute +- [frameLocator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytext/) - Locate by visible text diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyrole.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyrole.md new file mode 100644 index 0000000000..fd6378e99a --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyrole.md @@ -0,0 +1,224 @@ +--- +title: 'getByRole(role[, options])' +description: 'Browser module: frameLocator.getByRole(role[, options]) method' +--- + +# getByRole(role[, options]) + +Returns a locator for elements with the specified ARIA role. This is the preferred way to locate elements as it most closely resembles how users and assistive technology perceive the page. + +| Parameter | Type | Default | Description | +| ----------------------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- | +| `role` | string | - | Required. The ARIA role to search for. For example, `'button'`, `'link'`, `'heading'`, or `'textbox'`. | +| options | object | `null` | | +| `options.checked` | boolean | `null` | Filter elements by their checked state. Only applicable for roles like `checkbox`, `radio`, `menuitemcheckbox`. | +| `options.disabled` | boolean | `null` | Filter elements by their disabled state. | +| `options.exact` | boolean | `false` | Whether to match the accessible name exactly with case sensitivity. When `true`, performs a case-sensitive match. | +| `options.expanded` | boolean | `null` | Filter elements by their expanded state. Only applicable for roles that support the `aria-expanded` attribute. | +| `options.includeHidden` | boolean | `false` | Whether to include elements that are normally excluded from the accessibility tree in the search. | +| `options.level` | number | `null` | Filter headings by their level 1 to 6. Only applicable for `heading` role. | +| `options.name` | string\|RegExp | `null` | Filter elements by their accessible name. The accessible name is typically the text content, label text, or aria-label attribute. | +| `options.pressed` | boolean | `null` | Filter elements by their pressed state. Only applicable for roles like `button` with toggle behavior. | +| `options.selected` | boolean | `null` | Filter elements by their selected state. Only applicable for roles like `option`, `tab`. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified role and options. | + +## Examples + +### Basic role selection + +Find and click a button by its role: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + `); + + const frameLocator = page.locator('#my_frame').contentFrame(); + await frameLocator.getByRole('button', { name: 'Pizza, Please!' }).click(); + } finally { + page.close(); + } +} +``` + +## Complete ARIA roles reference + +The following roles are supported and can be used with `getByRole()`, organized by category: + +### Widgets & Inputs + +- `button` - Buttons and clickable elements +- `checkbox` - Checkable boxes that can be on/off +- `combobox` - Editable drop-down menu combining input and list box +- `listbox` - Container for selectable list options +- `menu` - Menu of actions or navigation +- `menubar` - Container for top-level menus +- `menuitem` - Option within a menu +- `menuitemcheckbox` - Checkable menu item +- `menuitemradio` - Mutually exclusive menu item +- `meter` - Scalar measurement within a known range +- `option` - Selectable option in a list box or combo box +- `progressbar` - Progress indicator of an operation +- `radio` - Single-select option in a group +- `radiogroup` - Grouping of related radio buttons +- `scrollbar` - Control for scrolling content +- `searchbox` - Text field for search input +- `separator` - Divider that separates content or controls +- `slider` - Adjustable value control within a range +- `spinbutton` - Numeric input with increment/decrement controls +- `status` - Advisory status information (non-alert) +- `switch` - On/off toggle control +- `tab` - A tab in a tabbed interface +- `tablist` - Container for a set of tabs +- `tabpanel` - Content panel associated with a tab +- `textbox` - Input field for free-form text +- `timer` - Running time display that updates +- `toolbar` - Group of interactive controls +- `tooltip` - Contextual help popup +- `tree` - Hierarchical list of items +- `treeitem` - Item in a tree + +### Tables & Grids + +- `table` - Tabular data with rows and columns. +- `rowgroup` - Section that groups rows. For example, `thead`, `tbody`, `tfoot`. +- `row` - A row of cells within a table or grid. +- `rowheader` - Header cell for a row. +- `columnheader` - Header cell for a column. +- `cell` - Data cell in a table. +- `grid` - Interactive, tabular widget, such as a spreadsheet. +- `gridcell` - Cell within a grid. +- `treegrid` - Tree-structured grid with expandable rows. + +### Document Structure & Semantics + +- `article` - Self-contained composition (article) +- `blockquote` - Quotation from another source +- `caption` - Caption for a figure, table, or media +- `code` - Fragment of computer code +- `definition` - Definition of a term +- `deletion` - Content removed from a document +- `directory` - List of references +- `document` - Standalone document content +- `emphasis` - Content with emphatic stress +- `feed` - Stream of articles or entries +- `figure` - Figure with optional caption +- `generic` - Generic container with no specific semantics +- `img` - Image treated as a single graphic +- `insertion` - Content added to a document +- `link` - Hyperlink to another location +- `list` - List of items +- `listitem` - A single item within a list +- `mark` - Highlighted or marked content +- `marquee` - Scrolling region of text +- `math` - Mathematical expression +- `note` - An aside or annotation +- `none` - No semantic role; remove semantics +- `paragraph` - Paragraph of text +- `presentation` - Presentational only; ignore semantics +- `strong` - Content of strong importance +- `subscript` - Subscripted text +- `superscript` - Superscripted text +- `term` - A term being defined +- `time` - A time or date + +### Landmarks & Regions + +- `banner` - Site header landmark +- `complementary` - Complementary content (sidebar) +- `contentinfo` - Page footer information +- `form` - Region containing a form +- `main` - Main content landmark +- `navigation` - Navigation region of links +- `region` - Generic region of the page +- `search` - Search region +- `application` - Application container widget + +### Usage Examples by Category + +- **Form Testing:** + + + + +```javascript +// Text inputs +await frameLocator.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); +await frameLocator.getByRole('searchbox', { name: 'Search products' }).fill('laptop'); + +// Selections +await frameLocator.getByRole('checkbox', { name: 'Agree to terms' }).check(); +await frameLocator.getByRole('radio', { name: 'Standard shipping' }).check(); +await frameLocator.getByRole('combobox', { name: 'Country' }).selectOption('US'); + +// Interactive controls +await frameLocator.getByRole('slider', { name: 'Volume' }).fill('75'); +await frameLocator.getByRole('switch', { name: 'Enable notifications' }).click(); +``` + +- **Navigation Testing:** + + + + +```javascript +// Tabs +await frameLocator.getByRole('tab', { name: 'Overview' }).click(); +await expect(frameLocator.getByRole('tabpanel', { name: 'Overview' })).toBeVisible(); +``` + +- **Content Verification:** + + + + +```javascript +// Structure +await expect(frameLocator.getByRole('article')).toHaveCount(5); +await expect(frameLocator.getByRole('heading', { level: 1 })).toHaveText('Welcome'); + +// Status and feedback +await expect(frameLocator.getByRole('alert')).toHaveText('Form submitted successfully'); +await expect(frameLocator.getByRole('status')).toHaveText('3 items selected'); +``` + +## Best practices + +1. **Prefer role-based selection**: `getByRole()` is the preferred method for locating elements as it closely mirrors how users and assistive technology interact with your page. +1. **Use accessible names**: Always try to use the `name` option to make your tests more specific and reliable. +1. **Consider accessibility**: Using `getByRole()` encourages better accessibility practices in your application by ensuring elements have proper ARIA roles. + +## Related + +- [frameLocator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyalttext/) - Locate by alt text +- [frameLocator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbylabel/) - Locate by form labels +- [frameLocator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyplaceholder/) - Locate by placeholder text +- [frameLocator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytestid/) - Locate by test ID +- [frameLocator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytext/) - Locate by text content +- [frameLocator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytestid.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytestid.md new file mode 100644 index 0000000000..4dc03b4569 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytestid.md @@ -0,0 +1,83 @@ +--- +title: 'getByTestId(testId)' +description: 'Browser module: frameLocator.getByTestId(testId) method' +--- + +# getByTestId(testId) + +Returns a locator for elements with the specified test ID attribute. This method is designed for robust test automation by locating elements using dedicated test identifiers that are independent of the visual appearance or content changes. Currently it can only work with the `data-testid` attribute. + +| Parameter | Type | Default | Description | +| --------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `testId` | string \| RegExp | - | Required. The test ID value to search for. Searches for the `data-testid` attribute. Can be a string for exact match or a RegExp for pattern matching. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified test ID. | + +## Examples + +### Basic test ID usage + +Locate and interact with elements using test IDs: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + const iframeHTML = ` + + + + `; + + await page.setContent(` + + `); + + const frameLocator = page.locator("#my_frame").contentFrame(); + await frameLocator.getByTestId('username').fill('FirstLast'); + await frameLocator.getByTestId('email').fill('firstlast@example.com'); + await frameLocator.getByTestId('submit-button').click(); + } finally { + await page.close(); + } +} +``` + +## Best practices + +1. **Stable identifiers**: Use meaningful, stable test IDs that won't change with refactoring or content updates. +1. **Hierarchical naming**: Use consistent naming conventions like `user-profile-edit-btn`. +1. **Avoid duplicates**: Ensure test IDs are unique within the frame to prevent ambiguity. +1. **Strategic placement**: Add test IDs to key interactive elements and components that are frequently tested. +1. **Team coordination**: Establish test ID conventions with your development team to ensure consistency. + +## Related + +- [frameLocator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyrole/) - Locate by ARIA role +- [frameLocator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyalttext/) - Locate by alt text +- [frameLocator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbylabel/) - Locate by form labels +- [frameLocator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyplaceholder/) - Locate by placeholder text +- [frameLocator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytext/) - Locate by text content +- [frameLocator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytext.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytext.md new file mode 100644 index 0000000000..06f85b248e --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytext.md @@ -0,0 +1,123 @@ +--- +title: 'getByText(text[, options])' +description: 'Browser module: frameLocator.getByText(text[, options]) method' +--- + +# getByText(text[, options]) + +Returns a locator for elements containing the specified text. This method finds elements by their visible text content, making it ideal for locating user-facing content like buttons, links, headings, and other text elements. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------- | +| `text` | string \| RegExp | - | Required. The text content to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements containing the specified text. | + +## Examples + +Find and click elements by their visible text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + `); + + const frameLocator = page.locator('#my_frame').contentFrame(); + await frameLocator.getByText('Pizza, Please!').click(); + + const noThanksBtn = frameLocator.getByText('No thanks'); + await noThanksBtn.click(); + } finally { + await page.close(); + } +} +``` + +## Text matching behavior + +**Whitespace normalization**: Text matching automatically normalizes whitespace, meaning: + +- Multiple spaces become single spaces +- Line breaks become spaces +- Leading and trailing whitespace is ignored + +Consider the following DOM structure: + + + + +```html +
Hello world
+
Hello
+``` + +You can locate by text substring, exact string, or a regular expression: + + + + +```js +// Matches +frameLocator.getByText('world'); +// Matches first
+frameLocator.getByText('Hello world'); +// Matches second
+frameLocator.getByText('Hello', { exact: true }); +// Matches both
s +frameLocator.getByText(/Hello/); +// Matches second
+frameLocator.getByText(/^hello$/i); +``` + +## Common use cases + +- **Button interactions**: Submit, Cancel, Delete, Edit buttons +- **Navigation**: Menu items, breadcrumbs, pagination links +- **Content verification**: Success messages, error messages, headings +- **Form interactions**: Checkbox labels, radio button options +- **Status indicators**: Active, Inactive, Pending states + +## Best practices + +1. **User-focused testing**: Using `getByText()` ensures your tests interact with content as users see it. +1. **Avoid brittle text**: Be cautious with exact text that might change frequently (like dates, counts, or user-generated content). +1. **Use meaningful text**: Prefer descriptive button text and labels over generic terms like "Click here" or "Button". +1. **Handle dynamic content**: Use regular expressions for text that contains variable parts (timestamps, user names, counts). +1. **Consider accessibility**: Text-based selection encourages better accessibility practices in your application. +1. **Internationalization**: For multi-language applications, consider using test IDs or roles instead of text for critical interactions. + +## Related + +- [frameLocator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyrole/) - Locate by ARIA role +- [frameLocator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyalttext/) - Locate by alt text +- [frameLocator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbylabel/) - Locate by form labels +- [frameLocator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyplaceholder/) - Locate by placeholder text +- [frameLocator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytestid/) - Locate by test ID +- [frameLocator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytitle.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytitle.md new file mode 100644 index 0000000000..9216890da3 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytitle.md @@ -0,0 +1,109 @@ +--- +title: 'getByTitle(title[, options])' +description: 'Browser module: frameLocator.getByTitle(title[, options]) method' +--- + +# getByTitle(title[, options]) + +Returns a locator for elements with the specified `title` attribute. This method is useful for locating elements that use the `title` attribute to provide additional information, tooltips, or accessibility context. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ | +| `title` | string \| RegExp | - | Required. The title text to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the title text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified title attribute. | + +## Examples + +Find and interact with elements by their title attribute: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + const iframeHTML = ` + + + + `; + + await page.setContent(` + + `); + + const frameLocator = page.locator("#my_frame").contentFrame(); + + await frameLocator.getByTitle('Hello World').click(); + + await frameLocator.getByTitle('Favorite Color').selectOption('Red'); + + await frameLocator.getByTitle('Check me').check(); + } finally { + await page.close(); + } +} +``` + +## Common use cases + +- **User interface controls:** + - Toolbar buttons and action items + - Navigation controls (previous/next, pagination) + - Media player controls + - Menu and drop-down triggers +- **Informational elements:** + - Help icons and tooltips + - Status indicators and badges + - Progress indicators + - Warning and error messages +- **Accessibility support:** + - Screen reader descriptions + - Alternative text for complex elements + - Context-sensitive help + - Form field explanations + +## Best practices + +1. **Meaningful titles**: Ensure title attributes provide clear, helpful information about the element's purpose or content. +1. **Accessibility compliance**: Use titles to enhance accessibility, especially for elements that might not have clear visual labels. +1. **Avoid redundancy**: Don't duplicate visible text in the title attribute unless providing additional context. +1. **Dynamic content**: When testing applications with changing title content, use flexible matching patterns or regular expressions. +1. **Tooltip testing**: Remember that title attributes often create tooltips on hover, which can be useful for UI testing. +1. **Internationalization**: Consider that title text may change in different language versions of your application. + +## Related + +- [frameLocator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyrole/) - Locate by ARIA role +- [frameLocator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyalttext/) - Locate by alt text +- [frameLocator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbylabel/) - Locate by form labels +- [frameLocator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbyplaceholder/) - Locate by placeholder text +- [frameLocator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytestid/) - Locate by test ID +- [frameLocator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/getbytext/) - Locate by visible text diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/locator.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/locator.md new file mode 100644 index 0000000000..34fecc9854 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/locator.md @@ -0,0 +1,52 @@ +--- +title: 'locator(selector)' +description: 'Browser module: frameLocator.locator(selector) method' +--- + +# locator(selector) + +The method returns an element [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/). Locators resolve to the element when the action takes place, which means locators can span over navigations where the underlying dom changes. + +| Parameter | Type | Default | Description | +| --------- | ------ | ------- | --------------------------------------------- | +| selector | string | `''` | A selector to use when resolving DOM element. | + +### Returns + +| Type | Description | +| --------------------------------------------------------------------------------------------------- | ----------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | The element `Locator` associated with the frame. | + +### Example + +{{< code >}} + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + await page.setContent(` + + `); + + const textbox = page.locator('#my_frame').contentFrame().locator('#text1'); + await textbox.focus(); +} +``` + +{{< /code >}} From 36040b32fc4f6e140547e3922524bf997c8071ca Mon Sep 17 00:00:00 2001 From: AgnesToulet <35176601+AgnesToulet@users.noreply.github.com> Date: Fri, 12 Sep 2025 16:29:34 +0200 Subject: [PATCH 2/7] Add locator.contentFrame --- .../k6-browser/locator/_index.md | 1 + .../k6-browser/locator/contentframe.md | 57 +++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/locator/contentframe.md diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md index 9bf81b8c17..c6e058519f 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md @@ -22,6 +22,7 @@ Locator can be created with the [page.locator(selector[, options])](https://graf | [check([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/check) {{< docs/bwipt id="471" >}} | Select the input checkbox. | | [clear([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/clear) | Clears text boxes and input fields of any existing values. | | [click([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/click) {{< docs/bwipt id="471" >}} | Mouse click on the chosen element. | +| [contentFrame()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/contentframe) | Returns a `FrameLocator` object pointing to the same `iframe` as this locator. | [count()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/count) | Returns the number of elements matching the selector. | | [dblclick([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/dblclick) {{< docs/bwipt id="471" >}} | Mouse double click on the chosen element. | | [dispatchEvent(type, eventInit, [options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/dispatchevent) | Dispatches HTML DOM event types e.g. `'click'`. | diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/contentframe.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/contentframe.md new file mode 100644 index 0000000000..66fe9b2101 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/contentframe.md @@ -0,0 +1,57 @@ +--- +title: 'contentFrame()' +description: 'Browser module: locator.contentFrame method' +--- + +# contentFrame() + +This method returns a [FrameLocator](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/) object pointing to the same `iframe` as this locator. + +Useful when you have a [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) object obtained somewhere, and later on would like to interact with the content inside the frame. + +### Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------- | +| [FrameLocator](https://grafana.com/docs/k6//javascript-api/k6-browser/framelocator/) | The `FrameLocator` pointing to the same`iframe` as this locator. | + +### Example + +{{< code >}} + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + `); + + const frameLocator = page.locator('#my_frame').contentFrame(); + await frameLocator.getByText('Pizza, Please!').click(); + + const noThanksBtn = frameLocator.getByText('No thanks'); + await noThanksBtn.click(); + } finally { + await page.close(); + } +} +``` + +{{< /code >}} From 5006ef16c82eb4ac5cf65ebefa7d12d39233a7b2 Mon Sep 17 00:00:00 2001 From: AgnesToulet <35176601+AgnesToulet@users.noreply.github.com> Date: Fri, 12 Sep 2025 16:29:52 +0200 Subject: [PATCH 3/7] Minor fixes in page.getBy* docs --- .../k6/next/javascript-api/k6-browser/page/getbylabel.md | 4 ++-- .../next/javascript-api/k6-browser/page/getbyplaceholder.md | 2 +- .../k6/next/javascript-api/k6-browser/page/getbytitle.md | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbylabel.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbylabel.md index 496503c19a..d06572478e 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbylabel.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbylabel.md @@ -112,8 +112,8 @@ export default async function () { `); // Inputs - page.getByLabel('Username (hint: default)', { exact: true }).fill('default'); - page.getByLabel(/^Password.*$/).fill('12345678'); + await page.getByLabel('Username (hint: default)', { exact: true }).fill('default'); + await page.getByLabel(/^Password.*$/).fill('12345678'); // Checkbox await page.getByLabel('Subscribe to newsletter').check(); diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbyplaceholder.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbyplaceholder.md index e5d163e2d7..0da4132e33 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbyplaceholder.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbyplaceholder.md @@ -19,7 +19,7 @@ Returns a locator for input elements with the specified `placeholder` attribute. | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the input elements matching the specified placeholder text. | -## Examples +## Example Find and fill inputs by their placeholder text: diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbytitle.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbytitle.md index 8c7be87342..e3b314fdd7 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbytitle.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbytitle.md @@ -27,7 +27,6 @@ Find and interact with elements by their title attribute: ```javascript import { browser } from 'k6/browser'; -import { expect } from 'https://jslib.k6.io/k6-testing/0.5.0/index.js'; export const options = { scenarios: { From a9b116511d27cd6ae4d5a66c7b222f4929a2daa1 Mon Sep 17 00:00:00 2001 From: AgnesToulet <35176601+AgnesToulet@users.noreply.github.com> Date: Fri, 19 Sep 2025 10:14:02 +0200 Subject: [PATCH 4/7] move getbyalttext common content to shared doc --- .../k6-browser/framelocator/getbyalttext.md | 38 +------------------ .../k6-browser/page/getbyalttext.md | 38 +------------------ .../browser/getby-apis/getbyalttext-spec.md | 19 ++++++++++ .../browser/getby-apis/getbyalttext-tips.md | 25 ++++++++++++ 4 files changed, 48 insertions(+), 72 deletions(-) create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-spec.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-tips.md diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md index ea86a47b3f..fc978aba76 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md @@ -3,21 +3,7 @@ title: 'getByAltText(altText[, options])' description: 'Browser module: frameLocator.getByAltText(altText[, options]) method' --- -# getByAltText(altText[, options]) - -Returns a locator for elements with the specified alt text. This method is useful for locating images and other elements that have an `alt` attribute, making your tests more accessible and user-focused. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------- | -| `altText` | string \| RegExp | - | Required. The alt text to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the alt text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with elements matching the specified alt text. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-spec.md" version="" >}} ## Examples @@ -144,27 +130,7 @@ export default async function () { } ``` -## Common use cases - -- **Image testing:** - - Testing image alt text for accessibility compliance - - Interacting with clickable images/banners -- **Accessibility testing:** - - Ensuring all images have meaningful alt text - - Testing screen reader compatibility - - Validating WCAG compliance -- **UI interaction:** - - Clicking on logo images to navigate home - - Selecting images in galleries or carousels - - Interacting with image-based buttons - -## Best practices - -1. **Use descriptive alt text**: When creating tests, ensure your application uses meaningful alt text that describes the image content or function. -1. **Prefer exact matches**: Use `exact: true` when you need precise matching to avoid false positives. -1. **Accessibility-first**: Using `getByAltText()` encourages better accessibility practices by ensuring images have proper alt attributes. -1. **Regular expressions for patterns**: Use RegExp for flexible matching when dealing with dynamic or numbered content. -1. **Combine with assertions**: Always verify that the located elements behave as expected using assertions. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbyalttext.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbyalttext.md index 349b56d644..17ea11b8dc 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbyalttext.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbyalttext.md @@ -3,21 +3,7 @@ title: 'getByAltText(altText[, options])' description: 'Browser module: page.getByAltText(altText[, options]) method' --- -# getByAltText(altText[, options]) - -Returns a locator for elements with the specified alt text. This method is useful for locating images and other elements that have an `alt` attribute, making your tests more accessible and user-focused. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------- | -| `altText` | string \| RegExp | - | Required. The alt text to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the alt text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with elements matching the specified alt text. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-spec.md" version="" >}} ## Examples @@ -138,27 +124,7 @@ export default async function () { } ``` -## Common use cases - -- **Image testing:** - - Testing image alt text for accessibility compliance - - Interacting with clickable images/banners -- **Accessibility testing:** - - Ensuring all images have meaningful alt text - - Testing screen reader compatibility - - Validating WCAG compliance -- **UI interaction:** - - Clicking on logo images to navigate home - - Selecting images in galleries or carousels - - Interacting with image-based buttons - -## Best practices - -1. **Use descriptive alt text**: When creating tests, ensure your application uses meaningful alt text that describes the image content or function. -1. **Prefer exact matches**: Use `exact: true` when you need precise matching to avoid false positives. -1. **Accessibility-first**: Using `getByAltText()` encourages better accessibility practices by ensuring images have proper alt attributes. -1. **Regular expressions for patterns**: Use RegExp for flexible matching when dealing with dynamic or numbered content. -1. **Combine with assertions**: Always verify that the located elements behave as expected using assertions. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-spec.md b/docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-spec.md new file mode 100644 index 0000000000..9c766fbbae --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-spec.md @@ -0,0 +1,19 @@ +--- +title: browser/getby-apis/getbyalttext-spec +--- + +# getByAltText(altText[, options]) + +Returns a locator for elements with the specified alt text. This method is useful for locating images and other elements that have an `alt` attribute, making your tests more accessible and user-focused. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------- | +| `altText` | string \| RegExp | - | Required. The alt text to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the alt text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with elements matching the specified alt text. | \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-tips.md b/docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-tips.md new file mode 100644 index 0000000000..15b96b9654 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-tips.md @@ -0,0 +1,25 @@ +--- +title: browser/getby-apis/getbyalttext-tips +--- + +## Common use cases + +- **Image testing:** + - Testing image alt text for accessibility compliance + - Interacting with clickable images/banners +- **Accessibility testing:** + - Ensuring all images have meaningful alt text + - Testing screen reader compatibility + - Validating WCAG compliance +- **UI interaction:** + - Clicking on logo images to navigate home + - Selecting images in galleries or carousels + - Interacting with image-based buttons + +## Best practices + +1. **Use descriptive alt text**: When creating tests, ensure your application uses meaningful alt text that describes the image content or function. +1. **Prefer exact matches**: Use `exact: true` when you need precise matching to avoid false positives. +1. **Accessibility-first**: Using `getByAltText()` encourages better accessibility practices by ensuring images have proper alt attributes. +1. **Regular expressions for patterns**: Use RegExp for flexible matching when dealing with dynamic or numbered content. +1. **Combine with assertions**: Always verify that the located elements behave as expected using assertions. From 3ae0bcd793b08ae41d90ec411647ea94a4d8e9b6 Mon Sep 17 00:00:00 2001 From: AgnesToulet <35176601+AgnesToulet@users.noreply.github.com> Date: Fri, 19 Sep 2025 10:33:42 +0200 Subject: [PATCH 5/7] move every getBy methods to shared folder --- .../k6-browser/framelocator/getbylabel.md | 52 +----- .../framelocator/getbyplaceholder.md | 41 +---- .../k6-browser/framelocator/getbyrole.md | 171 +----------------- .../k6-browser/framelocator/getbytestid.md | 22 +-- .../k6-browser/framelocator/getbytext.md | 69 +------ .../k6-browser/framelocator/getbytitle.md | 43 +---- .../k6-browser/page/getbylabel.md | 30 +-- .../k6-browser/page/getbyplaceholder.md | 41 +---- .../k6-browser/page/getbyrole.md | 171 +----------------- .../k6-browser/page/getbytestid.md | 22 +-- .../k6-browser/page/getbytext.md | 69 +------ .../k6-browser/page/getbytitle.md | 43 +---- .../browser/getby-apis/getbylabel-spec.md | 19 ++ .../browser/getby-apis/getbylabel-tips.md | 45 +++++ .../getby-apis/getbyplaceholder-spec.md | 19 ++ .../getby-apis/getbyplaceholder-tips.md | 28 +++ .../browser/getby-apis/getbyrole-spec.md | 27 +++ .../browser/getby-apis/getbyrole-tips.md | 150 +++++++++++++++ .../browser/getby-apis/getbytestid-spec.md | 17 ++ .../browser/getby-apis/getbytestid-tips.md | 11 ++ .../browser/getby-apis/getbytext-spec.md | 19 ++ .../browser/getby-apis/getbytext-tips.md | 56 ++++++ .../browser/getby-apis/getbytitle-spec.md | 19 ++ .../browser/getby-apis/getbytitle-tips.md | 30 +++ 24 files changed, 464 insertions(+), 750 deletions(-) create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbylabel-spec.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbylabel-tips.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbyplaceholder-spec.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbyplaceholder-tips.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbyrole-spec.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbyrole-tips.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbytestid-spec.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbytestid-tips.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbytext-spec.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbytext-tips.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbytitle-spec.md create mode 100644 docs/sources/k6/next/shared/browser/getby-apis/getbytitle-tips.md diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md index f16bb3fda3..63dcbbda21 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md @@ -3,15 +3,7 @@ title: 'getByLabel(text[, options])' description: 'Browser module: frameLocator.getByLabel(text[, options]) method' --- -# getByLabel(text[, options]) - -Returns a locator for form controls associated with the specified label text. This method is ideal for interacting with form elements in an accessible and user-focused way, as it mirrors how users typically identify form fields. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ | -| `text` | string \| RegExp | - | Required. The label text to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the label text exactly with case sensitivity. When `true`, performs a case-sensitive match. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-spec.md" version="" >}} ## Returns @@ -143,47 +135,7 @@ export default async function () { } ``` -## Label association patterns - -The `getByLabel()` method works with several HTML patterns for associating labels with form controls: - -1. Explicit association with `for` attribute: - - - - ```html - - ``` - -1. ARIA labeling: - - - - ```html - Username - ``` - -1. ARIA label attribute: - - - - ```html - - ``` - -## Common use cases - -- **Form testing**: Login forms, registration forms, contact forms -- **E-commerce**: Checkout forms, shipping information, payment details -- **Settings pages**: User preferences, account settings, configuration forms -- **Accessibility testing**: Ensuring proper label association and screen reader compatibility - -## Best practices - -1. **Accessibility-first approach**: Using `getByLabel()` ensures your tests work the same way users with assistive technology interact with forms. -1. **Meaningful labels**: Encourage developers to use descriptive, unique label text that clearly identifies the form control's purpose. -1. **Required field indicators**: When testing required fields, include any visual indicators (like asterisks) in your label text matching. -1. **Form validation testing**: Use labels to test form validation scenarios, as they provide a stable way to identify fields regardless of styling changes. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyplaceholder.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyplaceholder.md index ad60cdf219..fbee09862d 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyplaceholder.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyplaceholder.md @@ -3,21 +3,7 @@ title: 'getByPlaceholder(placeholder[, options])' description: 'Browser module: frameLocator.getByPlaceholder(placeholder[, options]) method' --- -# getByPlaceholder(placeholder[, options]) - -Returns a locator for input elements with the specified `placeholder` attribute. This method is useful for locating form fields that use `placeholder` attribute to provide hints or examples to users about the expected input format. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | -| `placeholder` | string \| RegExp | - | Required. The placeholder text to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the placeholder text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the input elements matching the specified placeholder text. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-spec.md" version="" >}} ## Example @@ -70,30 +56,7 @@ export default async function () { } ``` -## Common use cases - -- **Form field identification:** - - Login and registration forms without explicit labels - - Quick search boxes - - Filter and input controls - - Comment and feedback forms -- **E-commerce:** - - Product search bars - - Quantity input fields - - Promo code entry - - Address and payment information -- **Interactive applications:** - - Chat input fields - - Command input interfaces - - Settings and configuration forms - - Data entry applications - -## Best practices - -1. **Complement, don't replace labels**: Placeholder text should supplement, not replace proper form labels for accessibility. -1. **Use descriptive placeholders**: Ensure placeholder text clearly indicates the expected input format or content. -1. **Consider internationalization**: When testing multi-language applications, be aware that placeholder text may change. -1. **Accessibility considerations**: Remember that placeholder text alone may not be sufficient for users with disabilities. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyrole.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyrole.md index fd6378e99a..48a90f8218 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyrole.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyrole.md @@ -3,29 +3,7 @@ title: 'getByRole(role[, options])' description: 'Browser module: frameLocator.getByRole(role[, options]) method' --- -# getByRole(role[, options]) - -Returns a locator for elements with the specified ARIA role. This is the preferred way to locate elements as it most closely resembles how users and assistive technology perceive the page. - -| Parameter | Type | Default | Description | -| ----------------------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- | -| `role` | string | - | Required. The ARIA role to search for. For example, `'button'`, `'link'`, `'heading'`, or `'textbox'`. | -| options | object | `null` | | -| `options.checked` | boolean | `null` | Filter elements by their checked state. Only applicable for roles like `checkbox`, `radio`, `menuitemcheckbox`. | -| `options.disabled` | boolean | `null` | Filter elements by their disabled state. | -| `options.exact` | boolean | `false` | Whether to match the accessible name exactly with case sensitivity. When `true`, performs a case-sensitive match. | -| `options.expanded` | boolean | `null` | Filter elements by their expanded state. Only applicable for roles that support the `aria-expanded` attribute. | -| `options.includeHidden` | boolean | `false` | Whether to include elements that are normally excluded from the accessibility tree in the search. | -| `options.level` | number | `null` | Filter headings by their level 1 to 6. Only applicable for `heading` role. | -| `options.name` | string\|RegExp | `null` | Filter elements by their accessible name. The accessible name is typically the text content, label text, or aria-label attribute. | -| `options.pressed` | boolean | `null` | Filter elements by their pressed state. Only applicable for roles like `button` with toggle behavior. | -| `options.selected` | boolean | `null` | Filter elements by their selected state. Only applicable for roles like `option`, `tab`. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified role and options. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyrole-spec.md" version="" >}} ## Examples @@ -67,152 +45,7 @@ export default async function () { } ``` -## Complete ARIA roles reference - -The following roles are supported and can be used with `getByRole()`, organized by category: - -### Widgets & Inputs - -- `button` - Buttons and clickable elements -- `checkbox` - Checkable boxes that can be on/off -- `combobox` - Editable drop-down menu combining input and list box -- `listbox` - Container for selectable list options -- `menu` - Menu of actions or navigation -- `menubar` - Container for top-level menus -- `menuitem` - Option within a menu -- `menuitemcheckbox` - Checkable menu item -- `menuitemradio` - Mutually exclusive menu item -- `meter` - Scalar measurement within a known range -- `option` - Selectable option in a list box or combo box -- `progressbar` - Progress indicator of an operation -- `radio` - Single-select option in a group -- `radiogroup` - Grouping of related radio buttons -- `scrollbar` - Control for scrolling content -- `searchbox` - Text field for search input -- `separator` - Divider that separates content or controls -- `slider` - Adjustable value control within a range -- `spinbutton` - Numeric input with increment/decrement controls -- `status` - Advisory status information (non-alert) -- `switch` - On/off toggle control -- `tab` - A tab in a tabbed interface -- `tablist` - Container for a set of tabs -- `tabpanel` - Content panel associated with a tab -- `textbox` - Input field for free-form text -- `timer` - Running time display that updates -- `toolbar` - Group of interactive controls -- `tooltip` - Contextual help popup -- `tree` - Hierarchical list of items -- `treeitem` - Item in a tree - -### Tables & Grids - -- `table` - Tabular data with rows and columns. -- `rowgroup` - Section that groups rows. For example, `thead`, `tbody`, `tfoot`. -- `row` - A row of cells within a table or grid. -- `rowheader` - Header cell for a row. -- `columnheader` - Header cell for a column. -- `cell` - Data cell in a table. -- `grid` - Interactive, tabular widget, such as a spreadsheet. -- `gridcell` - Cell within a grid. -- `treegrid` - Tree-structured grid with expandable rows. - -### Document Structure & Semantics - -- `article` - Self-contained composition (article) -- `blockquote` - Quotation from another source -- `caption` - Caption for a figure, table, or media -- `code` - Fragment of computer code -- `definition` - Definition of a term -- `deletion` - Content removed from a document -- `directory` - List of references -- `document` - Standalone document content -- `emphasis` - Content with emphatic stress -- `feed` - Stream of articles or entries -- `figure` - Figure with optional caption -- `generic` - Generic container with no specific semantics -- `img` - Image treated as a single graphic -- `insertion` - Content added to a document -- `link` - Hyperlink to another location -- `list` - List of items -- `listitem` - A single item within a list -- `mark` - Highlighted or marked content -- `marquee` - Scrolling region of text -- `math` - Mathematical expression -- `note` - An aside or annotation -- `none` - No semantic role; remove semantics -- `paragraph` - Paragraph of text -- `presentation` - Presentational only; ignore semantics -- `strong` - Content of strong importance -- `subscript` - Subscripted text -- `superscript` - Superscripted text -- `term` - A term being defined -- `time` - A time or date - -### Landmarks & Regions - -- `banner` - Site header landmark -- `complementary` - Complementary content (sidebar) -- `contentinfo` - Page footer information -- `form` - Region containing a form -- `main` - Main content landmark -- `navigation` - Navigation region of links -- `region` - Generic region of the page -- `search` - Search region -- `application` - Application container widget - -### Usage Examples by Category - -- **Form Testing:** - - - - -```javascript -// Text inputs -await frameLocator.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); -await frameLocator.getByRole('searchbox', { name: 'Search products' }).fill('laptop'); - -// Selections -await frameLocator.getByRole('checkbox', { name: 'Agree to terms' }).check(); -await frameLocator.getByRole('radio', { name: 'Standard shipping' }).check(); -await frameLocator.getByRole('combobox', { name: 'Country' }).selectOption('US'); - -// Interactive controls -await frameLocator.getByRole('slider', { name: 'Volume' }).fill('75'); -await frameLocator.getByRole('switch', { name: 'Enable notifications' }).click(); -``` - -- **Navigation Testing:** - - - - -```javascript -// Tabs -await frameLocator.getByRole('tab', { name: 'Overview' }).click(); -await expect(frameLocator.getByRole('tabpanel', { name: 'Overview' })).toBeVisible(); -``` - -- **Content Verification:** - - - - -```javascript -// Structure -await expect(frameLocator.getByRole('article')).toHaveCount(5); -await expect(frameLocator.getByRole('heading', { level: 1 })).toHaveText('Welcome'); - -// Status and feedback -await expect(frameLocator.getByRole('alert')).toHaveText('Form submitted successfully'); -await expect(frameLocator.getByRole('status')).toHaveText('3 items selected'); -``` - -## Best practices - -1. **Prefer role-based selection**: `getByRole()` is the preferred method for locating elements as it closely mirrors how users and assistive technology interact with your page. -1. **Use accessible names**: Always try to use the `name` option to make your tests more specific and reliable. -1. **Consider accessibility**: Using `getByRole()` encourages better accessibility practices in your application by ensuring elements have proper ARIA roles. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyrole-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytestid.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytestid.md index 4dc03b4569..97ccb6379a 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytestid.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytestid.md @@ -3,19 +3,7 @@ title: 'getByTestId(testId)' description: 'Browser module: frameLocator.getByTestId(testId) method' --- -# getByTestId(testId) - -Returns a locator for elements with the specified test ID attribute. This method is designed for robust test automation by locating elements using dedicated test identifiers that are independent of the visual appearance or content changes. Currently it can only work with the `data-testid` attribute. - -| Parameter | Type | Default | Description | -| --------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `testId` | string \| RegExp | - | Required. The test ID value to search for. Searches for the `data-testid` attribute. Can be a string for exact match or a RegExp for pattern matching. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified test ID. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytestid-spec.md" version="" >}} ## Examples @@ -65,13 +53,7 @@ export default async function () { } ``` -## Best practices - -1. **Stable identifiers**: Use meaningful, stable test IDs that won't change with refactoring or content updates. -1. **Hierarchical naming**: Use consistent naming conventions like `user-profile-edit-btn`. -1. **Avoid duplicates**: Ensure test IDs are unique within the frame to prevent ambiguity. -1. **Strategic placement**: Add test IDs to key interactive elements and components that are frequently tested. -1. **Team coordination**: Establish test ID conventions with your development team to ensure consistency. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytestid-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytext.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytext.md index 06f85b248e..1521bde133 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytext.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytext.md @@ -3,21 +3,7 @@ title: 'getByText(text[, options])' description: 'Browser module: frameLocator.getByText(text[, options]) method' --- -# getByText(text[, options]) - -Returns a locator for elements containing the specified text. This method finds elements by their visible text content, making it ideal for locating user-facing content like buttons, links, headings, and other text elements. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------- | -| `text` | string \| RegExp | - | Required. The text content to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements containing the specified text. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytext-spec.md" version="" >}} ## Examples @@ -60,58 +46,7 @@ export default async function () { } ``` -## Text matching behavior - -**Whitespace normalization**: Text matching automatically normalizes whitespace, meaning: - -- Multiple spaces become single spaces -- Line breaks become spaces -- Leading and trailing whitespace is ignored - -Consider the following DOM structure: - - - - -```html -
Hello world
-
Hello
-``` - -You can locate by text substring, exact string, or a regular expression: - - - - -```js -// Matches -frameLocator.getByText('world'); -// Matches first
-frameLocator.getByText('Hello world'); -// Matches second
-frameLocator.getByText('Hello', { exact: true }); -// Matches both
s -frameLocator.getByText(/Hello/); -// Matches second
-frameLocator.getByText(/^hello$/i); -``` - -## Common use cases - -- **Button interactions**: Submit, Cancel, Delete, Edit buttons -- **Navigation**: Menu items, breadcrumbs, pagination links -- **Content verification**: Success messages, error messages, headings -- **Form interactions**: Checkbox labels, radio button options -- **Status indicators**: Active, Inactive, Pending states - -## Best practices - -1. **User-focused testing**: Using `getByText()` ensures your tests interact with content as users see it. -1. **Avoid brittle text**: Be cautious with exact text that might change frequently (like dates, counts, or user-generated content). -1. **Use meaningful text**: Prefer descriptive button text and labels over generic terms like "Click here" or "Button". -1. **Handle dynamic content**: Use regular expressions for text that contains variable parts (timestamps, user names, counts). -1. **Consider accessibility**: Text-based selection encourages better accessibility practices in your application. -1. **Internationalization**: For multi-language applications, consider using test IDs or roles instead of text for critical interactions. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytext-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytitle.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytitle.md index 9216890da3..900d6db336 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytitle.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbytitle.md @@ -3,21 +3,7 @@ title: 'getByTitle(title[, options])' description: 'Browser module: frameLocator.getByTitle(title[, options]) method' --- -# getByTitle(title[, options]) - -Returns a locator for elements with the specified `title` attribute. This method is useful for locating elements that use the `title` attribute to provide additional information, tooltips, or accessibility context. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ | -| `title` | string \| RegExp | - | Required. The title text to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the title text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified title attribute. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytitle-spec.md" version="" >}} ## Examples @@ -72,32 +58,7 @@ export default async function () { } ``` -## Common use cases - -- **User interface controls:** - - Toolbar buttons and action items - - Navigation controls (previous/next, pagination) - - Media player controls - - Menu and drop-down triggers -- **Informational elements:** - - Help icons and tooltips - - Status indicators and badges - - Progress indicators - - Warning and error messages -- **Accessibility support:** - - Screen reader descriptions - - Alternative text for complex elements - - Context-sensitive help - - Form field explanations - -## Best practices - -1. **Meaningful titles**: Ensure title attributes provide clear, helpful information about the element's purpose or content. -1. **Accessibility compliance**: Use titles to enhance accessibility, especially for elements that might not have clear visual labels. -1. **Avoid redundancy**: Don't duplicate visible text in the title attribute unless providing additional context. -1. **Dynamic content**: When testing applications with changing title content, use flexible matching patterns or regular expressions. -1. **Tooltip testing**: Remember that title attributes often create tooltips on hover, which can be useful for UI testing. -1. **Internationalization**: Consider that title text may change in different language versions of your application. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytitle-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbylabel.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbylabel.md index d06572478e..0cd888af68 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbylabel.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbylabel.md @@ -3,21 +3,7 @@ title: 'getByLabel(text[, options])' description: 'Browser module: page.getByLabel(text[, options]) method' --- -# getByLabel(text[, options]) - -Returns a locator for form controls associated with the specified label text. This method is ideal for interacting with form elements in an accessible and user-focused way, as it mirrors how users typically identify form fields. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ | -| `text` | string \| RegExp | - | Required. The label text to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the label text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the form control associated with the specified label. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-spec.md" version="" >}} ## Examples @@ -160,19 +146,7 @@ The `getByLabel()` method works with several HTML patterns for associating label ``` -## Common use cases - -- **Form testing**: Login forms, registration forms, contact forms -- **E-commerce**: Checkout forms, shipping information, payment details -- **Settings pages**: User preferences, account settings, configuration forms -- **Accessibility testing**: Ensuring proper label association and screen reader compatibility - -## Best practices - -1. **Accessibility-first approach**: Using `getByLabel()` ensures your tests work the same way users with assistive technology interact with forms. -1. **Meaningful labels**: Encourage developers to use descriptive, unique label text that clearly identifies the form control's purpose. -1. **Required field indicators**: When testing required fields, include any visual indicators (like asterisks) in your label text matching. -1. **Form validation testing**: Use labels to test form validation scenarios, as they provide a stable way to identify fields regardless of styling changes. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbyplaceholder.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbyplaceholder.md index 0da4132e33..29dec34046 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbyplaceholder.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbyplaceholder.md @@ -3,21 +3,7 @@ title: 'getByPlaceholder(placeholder[, options])' description: 'Browser module: page.getByPlaceholder(placeholder[, options]) method' --- -# getByPlaceholder(placeholder[, options]) - -Returns a locator for input elements with the specified `placeholder` attribute. This method is useful for locating form fields that use `placeholder` attribute to provide hints or examples to users about the expected input format. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | -| `placeholder` | string \| RegExp | - | Required. The placeholder text to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the placeholder text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the input elements matching the specified placeholder text. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-spec.md" version="" >}} ## Example @@ -65,30 +51,7 @@ export default async function () { } ``` -## Common use cases - -- **Form field identification:** - - Login and registration forms without explicit labels - - Quick search boxes - - Filter and input controls - - Comment and feedback forms -- **E-commerce:** - - Product search bars - - Quantity input fields - - Promo code entry - - Address and payment information -- **Interactive applications:** - - Chat input fields - - Command input interfaces - - Settings and configuration forms - - Data entry applications - -## Best practices - -1. **Complement, don't replace labels**: Placeholder text should supplement, not replace proper form labels for accessibility. -1. **Use descriptive placeholders**: Ensure placeholder text clearly indicates the expected input format or content. -1. **Consider internationalization**: When testing multi-language applications, be aware that placeholder text may change. -1. **Accessibility considerations**: Remember that placeholder text alone may not be sufficient for users with disabilities. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbyrole.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbyrole.md index 93085dd870..77d7c89542 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbyrole.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbyrole.md @@ -3,29 +3,7 @@ title: 'getByRole(role[, options])' description: 'Browser module: page.getByRole(role[, options]) method' --- -# getByRole(role[, options]) - -Returns a locator for elements with the specified ARIA role. This is the preferred way to locate elements as it most closely resembles how users and assistive technology perceive the page. - -| Parameter | Type | Default | Description | -| ----------------------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- | -| `role` | string | - | Required. The ARIA role to search for. For example, `'button'`, `'link'`, `'heading'`, or `'textbox'`. | -| options | object | `null` | | -| `options.checked` | boolean | `null` | Filter elements by their checked state. Only applicable for roles like `checkbox`, `radio`, `menuitemcheckbox`. | -| `options.disabled` | boolean | `null` | Filter elements by their disabled state. | -| `options.exact` | boolean | `false` | Whether to match the accessible name exactly with case sensitivity. When `true`, performs a case-sensitive match. | -| `options.expanded` | boolean | `null` | Filter elements by their expanded state. Only applicable for roles that support the `aria-expanded` attribute. | -| `options.includeHidden` | boolean | `false` | Whether to include elements that are normally excluded from the accessibility tree in the search. | -| `options.level` | number | `null` | Filter headings by their level 1 to 6. Only applicable for `heading` role. | -| `options.name` | string\|RegExp | `null` | Filter elements by their accessible name. The accessible name is typically the text content, label text, or aria-label attribute. | -| `options.pressed` | boolean | `null` | Filter elements by their pressed state. Only applicable for roles like `button` with toggle behavior. | -| `options.selected` | boolean | `null` | Filter elements by their selected state. Only applicable for roles like `option`, `tab`. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified role and options. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyrole-spec.md" version="" >}} ## Examples @@ -64,152 +42,7 @@ export default async function () { } ``` -## Complete ARIA roles reference - -The following roles are supported and can be used with `getByRole()`, organized by category: - -### Widgets & Inputs - -- `button` - Buttons and clickable elements -- `checkbox` - Checkable boxes that can be on/off -- `combobox` - Editable drop-down menu combining input and list box -- `listbox` - Container for selectable list options -- `menu` - Menu of actions or navigation -- `menubar` - Container for top-level menus -- `menuitem` - Option within a menu -- `menuitemcheckbox` - Checkable menu item -- `menuitemradio` - Mutually exclusive menu item -- `meter` - Scalar measurement within a known range -- `option` - Selectable option in a list box or combo box -- `progressbar` - Progress indicator of an operation -- `radio` - Single-select option in a group -- `radiogroup` - Grouping of related radio buttons -- `scrollbar` - Control for scrolling content -- `searchbox` - Text field for search input -- `separator` - Divider that separates content or controls -- `slider` - Adjustable value control within a range -- `spinbutton` - Numeric input with increment/decrement controls -- `status` - Advisory status information (non-alert) -- `switch` - On/off toggle control -- `tab` - A tab in a tabbed interface -- `tablist` - Container for a set of tabs -- `tabpanel` - Content panel associated with a tab -- `textbox` - Input field for free-form text -- `timer` - Running time display that updates -- `toolbar` - Group of interactive controls -- `tooltip` - Contextual help popup -- `tree` - Hierarchical list of items -- `treeitem` - Item in a tree - -### Tables & Grids - -- `table` - Tabular data with rows and columns. -- `rowgroup` - Section that groups rows. For example, `thead`, `tbody`, `tfoot`. -- `row` - A row of cells within a table or grid. -- `rowheader` - Header cell for a row. -- `columnheader` - Header cell for a column. -- `cell` - Data cell in a table. -- `grid` - Interactive, tabular widget, such as a spreadsheet. -- `gridcell` - Cell within a grid. -- `treegrid` - Tree-structured grid with expandable rows. - -### Document Structure & Semantics - -- `article` - Self-contained composition (article) -- `blockquote` - Quotation from another source -- `caption` - Caption for a figure, table, or media -- `code` - Fragment of computer code -- `definition` - Definition of a term -- `deletion` - Content removed from a document -- `directory` - List of references -- `document` - Standalone document content -- `emphasis` - Content with emphatic stress -- `feed` - Stream of articles or entries -- `figure` - Figure with optional caption -- `generic` - Generic container with no specific semantics -- `img` - Image treated as a single graphic -- `insertion` - Content added to a document -- `link` - Hyperlink to another location -- `list` - List of items -- `listitem` - A single item within a list -- `mark` - Highlighted or marked content -- `marquee` - Scrolling region of text -- `math` - Mathematical expression -- `note` - An aside or annotation -- `none` - No semantic role; remove semantics -- `paragraph` - Paragraph of text -- `presentation` - Presentational only; ignore semantics -- `strong` - Content of strong importance -- `subscript` - Subscripted text -- `superscript` - Superscripted text -- `term` - A term being defined -- `time` - A time or date - -### Landmarks & Regions - -- `banner` - Site header landmark -- `complementary` - Complementary content (sidebar) -- `contentinfo` - Page footer information -- `form` - Region containing a form -- `main` - Main content landmark -- `navigation` - Navigation region of links -- `region` - Generic region of the page -- `search` - Search region -- `application` - Application container widget - -### Usage Examples by Category - -- **Form Testing:** - - - - -```javascript -// Text inputs -await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); -await page.getByRole('searchbox', { name: 'Search products' }).fill('laptop'); - -// Selections -await page.getByRole('checkbox', { name: 'Agree to terms' }).check(); -await page.getByRole('radio', { name: 'Standard shipping' }).check(); -await page.getByRole('combobox', { name: 'Country' }).selectOption('US'); - -// Interactive controls -await page.getByRole('slider', { name: 'Volume' }).fill('75'); -await page.getByRole('switch', { name: 'Enable notifications' }).click(); -``` - -- **Navigation Testing:** - - - - -```javascript -// Tabs -await page.getByRole('tab', { name: 'Overview' }).click(); -await expect(page.getByRole('tabpanel', { name: 'Overview' })).toBeVisible(); -``` - -- **Content Verification:** - - - - -```javascript -// Structure -await expect(page.getByRole('article')).toHaveCount(5); -await expect(page.getByRole('heading', { level: 1 })).toHaveText('Welcome'); - -// Status and feedback -await expect(page.getByRole('alert')).toHaveText('Form submitted successfully'); -await expect(page.getByRole('status')).toHaveText('3 items selected'); -``` - -## Best practices - -1. **Prefer role-based selection**: `getByRole()` is the preferred method for locating elements as it closely mirrors how users and assistive technology interact with your page. -1. **Use accessible names**: Always try to use the `name` option to make your tests more specific and reliable. -1. **Consider accessibility**: Using `getByRole()` encourages better accessibility practices in your application by ensuring elements have proper ARIA roles. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyrole-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbytestid.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbytestid.md index b0d06e008a..5952cd8838 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbytestid.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbytestid.md @@ -3,19 +3,7 @@ title: 'getByTestId(testId)' description: 'Browser module: page.getByTestId(testId) method' --- -# getByTestId(testId) - -Returns a locator for elements with the specified test ID attribute. This method is designed for robust test automation by locating elements using dedicated test identifiers that are independent of the visual appearance or content changes. Currently it can only work with the `data-testid` attribute. - -| Parameter | Type | Default | Description | -| --------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `testId` | string \| RegExp | - | Required. The test ID value to search for. Searches for the `data-testid` attribute. Can be a string for exact match or a RegExp for pattern matching. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified test ID. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytestid-spec.md" version="" >}} ## Examples @@ -60,13 +48,7 @@ export default async function () { } ``` -## Best practices - -1. **Stable identifiers**: Use meaningful, stable test IDs that won't change with refactoring or content updates. -1. **Hierarchical naming**: Use consistent naming conventions like `user-profile-edit-btn`. -1. **Avoid duplicates**: Ensure test IDs are unique within the page to prevent ambiguity. -1. **Strategic placement**: Add test IDs to key interactive elements and components that are frequently tested. -1. **Team coordination**: Establish test ID conventions with your development team to ensure consistency. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytestid-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbytext.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbytext.md index ef2ba20192..6241337caa 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbytext.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbytext.md @@ -3,21 +3,7 @@ title: 'getByText(text[, options])' description: 'Browser module: page.getByText(text[, options]) method' --- -# getByText(text[, options]) - -Returns a locator for elements containing the specified text. This method finds elements by their visible text content, making it ideal for locating user-facing content like buttons, links, headings, and other text elements. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------- | -| `text` | string \| RegExp | - | Required. The text content to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements containing the specified text. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytext-spec.md" version="" >}} ## Examples @@ -57,58 +43,7 @@ export default async function () { } ``` -## Text matching behavior - -**Whitespace normalization**: Text matching automatically normalizes whitespace, meaning: - -- Multiple spaces become single spaces -- Line breaks become spaces -- Leading and trailing whitespace is ignored - -Consider the following DOM structure: - - - - -```html -
Hello world
-
Hello
-``` - -You can locate by text substring, exact string, or a regular expression: - - - - -```js -// Matches -page.getByText('world'); -// Matches first
-page.getByText('Hello world'); -// Matches second
-page.getByText('Hello', { exact: true }); -// Matches both
s -page.getByText(/Hello/); -// Matches second
-page.getByText(/^hello$/i); -``` - -## Common use cases - -- **Button interactions**: Submit, Cancel, Delete, Edit buttons -- **Navigation**: Menu items, breadcrumbs, pagination links -- **Content verification**: Success messages, error messages, headings -- **Form interactions**: Checkbox labels, radio button options -- **Status indicators**: Active, Inactive, Pending states - -## Best practices - -1. **User-focused testing**: Using `getByText()` ensures your tests interact with content as users see it. -1. **Avoid brittle text**: Be cautious with exact text that might change frequently (like dates, counts, or user-generated content). -1. **Use meaningful text**: Prefer descriptive button text and labels over generic terms like "Click here" or "Button". -1. **Handle dynamic content**: Use regular expressions for text that contains variable parts (timestamps, user names, counts). -1. **Consider accessibility**: Text-based selection encourages better accessibility practices in your application. -1. **Internationalization**: For multi-language applications, consider using test IDs or roles instead of text for critical interactions. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytext-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/javascript-api/k6-browser/page/getbytitle.md b/docs/sources/k6/next/javascript-api/k6-browser/page/getbytitle.md index e3b314fdd7..4acee6d942 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/page/getbytitle.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/page/getbytitle.md @@ -3,21 +3,7 @@ title: 'getByTitle(title[, options])' description: 'Browser module: page.getByTitle(title[, options]) method' --- -# getByTitle(title[, options]) - -Returns a locator for elements with the specified `title` attribute. This method is useful for locating elements that use the `title` attribute to provide additional information, tooltips, or accessibility context. - -| Parameter | Type | Default | Description | -| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ | -| `title` | string \| RegExp | - | Required. The title text to search for. Can be a string for exact match or a RegExp for pattern matching. | -| `options` | object | `null` | | -| `options.exact` | boolean | `false` | Whether to match the title text exactly with case sensitivity. When `true`, performs a case-sensitive match. | - -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified title attribute. | +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytitle-spec.md" version="" >}} ## Examples @@ -66,32 +52,7 @@ export default async function () { } ``` -## Common use cases - -- **User interface controls:** - - Toolbar buttons and action items - - Navigation controls (previous/next, pagination) - - Media player controls - - Menu and drop-down triggers -- **Informational elements:** - - Help icons and tooltips - - Status indicators and badges - - Progress indicators - - Warning and error messages -- **Accessibility support:** - - Screen reader descriptions - - Alternative text for complex elements - - Context-sensitive help - - Form field explanations - -## Best practices - -1. **Meaningful titles**: Ensure title attributes provide clear, helpful information about the element's purpose or content. -1. **Accessibility compliance**: Use titles to enhance accessibility, especially for elements that might not have clear visual labels. -1. **Avoid redundancy**: Don't duplicate visible text in the title attribute unless providing additional context. -1. **Dynamic content**: When testing applications with changing title content, use flexible matching patterns or regular expressions. -1. **Tooltip testing**: Remember that title attributes often create tooltips on hover, which can be useful for UI testing. -1. **Internationalization**: Consider that title text may change in different language versions of your application. +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytitle-tips.md" version="" >}} ## Related diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbylabel-spec.md b/docs/sources/k6/next/shared/browser/getby-apis/getbylabel-spec.md new file mode 100644 index 0000000000..d130258445 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbylabel-spec.md @@ -0,0 +1,19 @@ +--- +title: browser/getby-apis/getbylabel-spec +--- + +# getByLabel(text[, options]) + +Returns a locator for form controls associated with the specified label text. This method is ideal for interacting with form elements in an accessible and user-focused way, as it mirrors how users typically identify form fields. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ | +| `text` | string \| RegExp | - | Required. The label text to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the label text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the form control associated with the specified label. | \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbylabel-tips.md b/docs/sources/k6/next/shared/browser/getby-apis/getbylabel-tips.md new file mode 100644 index 0000000000..667adf99e9 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbylabel-tips.md @@ -0,0 +1,45 @@ +--- +title: browser/getby-apis/getbylabel-tips +--- + +## Label association patterns + +The `getByLabel()` method works with several HTML patterns for associating labels with form controls: + +1. Explicit association with `for` attribute: + + + + ```html + + ``` + +1. ARIA labeling: + + + + ```html + Username + ``` + +1. ARIA label attribute: + + + + ```html + + ``` + +## Common use cases + +- **Form testing**: Login forms, registration forms, contact forms +- **E-commerce**: Checkout forms, shipping information, payment details +- **Settings pages**: User preferences, account settings, configuration forms +- **Accessibility testing**: Ensuring proper label association and screen reader compatibility + +## Best practices + +1. **Accessibility-first approach**: Using `getByLabel()` ensures your tests work the same way users with assistive technology interact with forms. +1. **Meaningful labels**: Encourage developers to use descriptive, unique label text that clearly identifies the form control's purpose. +1. **Required field indicators**: When testing required fields, include any visual indicators (like asterisks) in your label text matching. +1. **Form validation testing**: Use labels to test form validation scenarios, as they provide a stable way to identify fields regardless of styling changes. \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbyplaceholder-spec.md b/docs/sources/k6/next/shared/browser/getby-apis/getbyplaceholder-spec.md new file mode 100644 index 0000000000..eeae220fa9 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbyplaceholder-spec.md @@ -0,0 +1,19 @@ +--- +title: browser/getby-apis/getbyplaceholder-spec +--- + +# getByPlaceholder(placeholder[, options]) + +Returns a locator for input elements with the specified `placeholder` attribute. This method is useful for locating form fields that use `placeholder` attribute to provide hints or examples to users about the expected input format. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | +| `placeholder` | string \| RegExp | - | Required. The placeholder text to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the placeholder text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the input elements matching the specified placeholder text. | diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbyplaceholder-tips.md b/docs/sources/k6/next/shared/browser/getby-apis/getbyplaceholder-tips.md new file mode 100644 index 0000000000..3e4b40786a --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbyplaceholder-tips.md @@ -0,0 +1,28 @@ +--- +title: browser/getby-apis/getbyplaceholder-tips +--- + +## Common use cases + +- **Form field identification:** + - Login and registration forms without explicit labels + - Quick search boxes + - Filter and input controls + - Comment and feedback forms +- **E-commerce:** + - Product search bars + - Quantity input fields + - Promo code entry + - Address and payment information +- **Interactive applications:** + - Chat input fields + - Command input interfaces + - Settings and configuration forms + - Data entry applications + +## Best practices + +1. **Complement, don't replace labels**: Placeholder text should supplement, not replace proper form labels for accessibility. +1. **Use descriptive placeholders**: Ensure placeholder text clearly indicates the expected input format or content. +1. **Consider internationalization**: When testing multi-language applications, be aware that placeholder text may change. +1. **Accessibility considerations**: Remember that placeholder text alone may not be sufficient for users with disabilities. \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbyrole-spec.md b/docs/sources/k6/next/shared/browser/getby-apis/getbyrole-spec.md new file mode 100644 index 0000000000..cb0bfd4056 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbyrole-spec.md @@ -0,0 +1,27 @@ +--- +title: browser/getby-apis/getbyrole-spec +--- + +# getByRole(role[, options]) + +Returns a locator for elements with the specified ARIA role. This is the preferred way to locate elements as it most closely resembles how users and assistive technology perceive the page. + +| Parameter | Type | Default | Description | +| ----------------------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- | +| `role` | string | - | Required. The ARIA role to search for. For example, `'button'`, `'link'`, `'heading'`, or `'textbox'`. | +| options | object | `null` | | +| `options.checked` | boolean | `null` | Filter elements by their checked state. Only applicable for roles like `checkbox`, `radio`, `menuitemcheckbox`. | +| `options.disabled` | boolean | `null` | Filter elements by their disabled state. | +| `options.exact` | boolean | `false` | Whether to match the accessible name exactly with case sensitivity. When `true`, performs a case-sensitive match. | +| `options.expanded` | boolean | `null` | Filter elements by their expanded state. Only applicable for roles that support the `aria-expanded` attribute. | +| `options.includeHidden` | boolean | `false` | Whether to include elements that are normally excluded from the accessibility tree in the search. | +| `options.level` | number | `null` | Filter headings by their level 1 to 6. Only applicable for `heading` role. | +| `options.name` | string\|RegExp | `null` | Filter elements by their accessible name. The accessible name is typically the text content, label text, or aria-label attribute. | +| `options.pressed` | boolean | `null` | Filter elements by their pressed state. Only applicable for roles like `button` with toggle behavior. | +| `options.selected` | boolean | `null` | Filter elements by their selected state. Only applicable for roles like `option`, `tab`. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified role and options. | \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbyrole-tips.md b/docs/sources/k6/next/shared/browser/getby-apis/getbyrole-tips.md new file mode 100644 index 0000000000..5b8f2c2db8 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbyrole-tips.md @@ -0,0 +1,150 @@ +--- +title: browser/getby-apis/getbyrole-tips +--- + +## Complete ARIA roles reference + +The following roles are supported and can be used with `getByRole()`, organized by category: + +### Widgets & Inputs + +- `button` - Buttons and clickable elements +- `checkbox` - Checkable boxes that can be on/off +- `combobox` - Editable drop-down menu combining input and list box +- `listbox` - Container for selectable list options +- `menu` - Menu of actions or navigation +- `menubar` - Container for top-level menus +- `menuitem` - Option within a menu +- `menuitemcheckbox` - Checkable menu item +- `menuitemradio` - Mutually exclusive menu item +- `meter` - Scalar measurement within a known range +- `option` - Selectable option in a list box or combo box +- `progressbar` - Progress indicator of an operation +- `radio` - Single-select option in a group +- `radiogroup` - Grouping of related radio buttons +- `scrollbar` - Control for scrolling content +- `searchbox` - Text field for search input +- `separator` - Divider that separates content or controls +- `slider` - Adjustable value control within a range +- `spinbutton` - Numeric input with increment/decrement controls +- `status` - Advisory status information (non-alert) +- `switch` - On/off toggle control +- `tab` - A tab in a tabbed interface +- `tablist` - Container for a set of tabs +- `tabpanel` - Content panel associated with a tab +- `textbox` - Input field for free-form text +- `timer` - Running time display that updates +- `toolbar` - Group of interactive controls +- `tooltip` - Contextual help popup +- `tree` - Hierarchical list of items +- `treeitem` - Item in a tree + +### Tables & Grids + +- `table` - Tabular data with rows and columns. +- `rowgroup` - Section that groups rows. For example, `thead`, `tbody`, `tfoot`. +- `row` - A row of cells within a table or grid. +- `rowheader` - Header cell for a row. +- `columnheader` - Header cell for a column. +- `cell` - Data cell in a table. +- `grid` - Interactive, tabular widget, such as a spreadsheet. +- `gridcell` - Cell within a grid. +- `treegrid` - Tree-structured grid with expandable rows. + +### Document Structure & Semantics + +- `article` - Self-contained composition (article) +- `blockquote` - Quotation from another source +- `caption` - Caption for a figure, table, or media +- `code` - Fragment of computer code +- `definition` - Definition of a term +- `deletion` - Content removed from a document +- `directory` - List of references +- `document` - Standalone document content +- `emphasis` - Content with emphatic stress +- `feed` - Stream of articles or entries +- `figure` - Figure with optional caption +- `generic` - Generic container with no specific semantics +- `img` - Image treated as a single graphic +- `insertion` - Content added to a document +- `link` - Hyperlink to another location +- `list` - List of items +- `listitem` - A single item within a list +- `mark` - Highlighted or marked content +- `marquee` - Scrolling region of text +- `math` - Mathematical expression +- `note` - An aside or annotation +- `none` - No semantic role; remove semantics +- `paragraph` - Paragraph of text +- `presentation` - Presentational only; ignore semantics +- `strong` - Content of strong importance +- `subscript` - Subscripted text +- `superscript` - Superscripted text +- `term` - A term being defined +- `time` - A time or date + +### Landmarks & Regions + +- `banner` - Site header landmark +- `complementary` - Complementary content (sidebar) +- `contentinfo` - Page footer information +- `form` - Region containing a form +- `main` - Main content landmark +- `navigation` - Navigation region of links +- `region` - Generic region of the page +- `search` - Search region +- `application` - Application container widget + +### Usage Examples by Category + +- **Form Testing:** + + + + +```javascript +// Text inputs +await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com'); +await page.getByRole('searchbox', { name: 'Search products' }).fill('laptop'); + +// Selections +await page.getByRole('checkbox', { name: 'Agree to terms' }).check(); +await page.getByRole('radio', { name: 'Standard shipping' }).check(); +await page.getByRole('combobox', { name: 'Country' }).selectOption('US'); + +// Interactive controls +await page.getByRole('slider', { name: 'Volume' }).fill('75'); +await page.getByRole('switch', { name: 'Enable notifications' }).click(); +``` + +- **Navigation Testing:** + + + + +```javascript +// Tabs +await page.getByRole('tab', { name: 'Overview' }).click(); +await expect(page.getByRole('tabpanel', { name: 'Overview' })).toBeVisible(); +``` + +- **Content Verification:** + + + + +```javascript +// Structure +await expect(page.getByRole('article')).toHaveCount(5); +await expect(page.getByRole('heading', { level: 1 })).toHaveText('Welcome'); + +// Status and feedback +await expect(page.getByRole('alert')).toHaveText('Form submitted successfully'); +await expect(page.getByRole('status')).toHaveText('3 items selected'); +``` + +## Best practices + +1. **Prefer role-based selection**: `getByRole()` is the preferred method for locating elements as it closely mirrors how users and assistive technology interact with your page. +1. **Use accessible names**: Always try to use the `name` option to make your tests more specific and reliable. +1. **Consider accessibility**: Using `getByRole()` encourages better accessibility practices in your application by ensuring elements have proper ARIA roles. \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbytestid-spec.md b/docs/sources/k6/next/shared/browser/getby-apis/getbytestid-spec.md new file mode 100644 index 0000000000..b45d8cca36 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbytestid-spec.md @@ -0,0 +1,17 @@ +--- +title: browser/getby-apis/getbytestid-spec +--- + +# getByTestId(testId) + +Returns a locator for elements with the specified test ID attribute. This method is designed for robust test automation by locating elements using dedicated test identifiers that are independent of the visual appearance or content changes. Currently it can only work with the `data-testid` attribute. + +| Parameter | Type | Default | Description | +| --------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `testId` | string \| RegExp | - | Required. The test ID value to search for. Searches for the `data-testid` attribute. Can be a string for exact match or a RegExp for pattern matching. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified test ID. | \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbytestid-tips.md b/docs/sources/k6/next/shared/browser/getby-apis/getbytestid-tips.md new file mode 100644 index 0000000000..e2191ebb44 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbytestid-tips.md @@ -0,0 +1,11 @@ +--- +title: browser/getby-apis/getbytestid-tips +--- + +## Best practices + +1. **Stable identifiers**: Use meaningful, stable test IDs that won't change with refactoring or content updates. +1. **Hierarchical naming**: Use consistent naming conventions like `user-profile-edit-btn`. +1. **Avoid duplicates**: Ensure test IDs are unique within the page to prevent ambiguity. +1. **Strategic placement**: Add test IDs to key interactive elements and components that are frequently tested. +1. **Team coordination**: Establish test ID conventions with your development team to ensure consistency. \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbytext-spec.md b/docs/sources/k6/next/shared/browser/getby-apis/getbytext-spec.md new file mode 100644 index 0000000000..b5360e620e --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbytext-spec.md @@ -0,0 +1,19 @@ +--- +title: browser/getby-apis/getbytext-spec +--- + +# getByText(text[, options]) + +Returns a locator for elements containing the specified text. This method finds elements by their visible text content, making it ideal for locating user-facing content like buttons, links, headings, and other text elements. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------- | +| `text` | string \| RegExp | - | Required. The text content to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements containing the specified text. | diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbytext-tips.md b/docs/sources/k6/next/shared/browser/getby-apis/getbytext-tips.md new file mode 100644 index 0000000000..76f25b83f6 --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbytext-tips.md @@ -0,0 +1,56 @@ +--- +title: browser/getby-apis/getbytext-tips +--- + +## Text matching behavior + +**Whitespace normalization**: Text matching automatically normalizes whitespace, meaning: + +- Multiple spaces become single spaces +- Line breaks become spaces +- Leading and trailing whitespace is ignored + +Consider the following DOM structure: + + + + +```html +
Hello world
+
Hello
+``` + +You can locate by text substring, exact string, or a regular expression: + + + + +```js +// Matches +page.getByText('world'); +// Matches first
+page.getByText('Hello world'); +// Matches second
+page.getByText('Hello', { exact: true }); +// Matches both
s +page.getByText(/Hello/); +// Matches second
+page.getByText(/^hello$/i); +``` + +## Common use cases + +- **Button interactions**: Submit, Cancel, Delete, Edit buttons +- **Navigation**: Menu items, breadcrumbs, pagination links +- **Content verification**: Success messages, error messages, headings +- **Form interactions**: Checkbox labels, radio button options +- **Status indicators**: Active, Inactive, Pending states + +## Best practices + +1. **User-focused testing**: Using `getByText()` ensures your tests interact with content as users see it. +1. **Avoid brittle text**: Be cautious with exact text that might change frequently (like dates, counts, or user-generated content). +1. **Use meaningful text**: Prefer descriptive button text and labels over generic terms like "Click here" or "Button". +1. **Handle dynamic content**: Use regular expressions for text that contains variable parts (timestamps, user names, counts). +1. **Consider accessibility**: Text-based selection encourages better accessibility practices in your application. +1. **Internationalization**: For multi-language applications, consider using test IDs or roles instead of text for critical interactions. \ No newline at end of file diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbytitle-spec.md b/docs/sources/k6/next/shared/browser/getby-apis/getbytitle-spec.md new file mode 100644 index 0000000000..bd296e2ace --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbytitle-spec.md @@ -0,0 +1,19 @@ +--- +title: browser/getby-apis/getbytitle-spec +--- + +# getByTitle(title[, options]) + +Returns a locator for elements with the specified `title` attribute. This method is useful for locating elements that use the `title` attribute to provide additional information, tooltips, or accessibility context. + +| Parameter | Type | Default | Description | +| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ | +| `title` | string \| RegExp | - | Required. The title text to search for. Can be a string for exact match or a RegExp for pattern matching. | +| `options` | object | `null` | | +| `options.exact` | boolean | `false` | Whether to match the title text exactly with case sensitivity. When `true`, performs a case-sensitive match. | + +## Returns + +| Type | Description | +| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | +| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the elements matching the specified title attribute. | diff --git a/docs/sources/k6/next/shared/browser/getby-apis/getbytitle-tips.md b/docs/sources/k6/next/shared/browser/getby-apis/getbytitle-tips.md new file mode 100644 index 0000000000..f00c7c8fcd --- /dev/null +++ b/docs/sources/k6/next/shared/browser/getby-apis/getbytitle-tips.md @@ -0,0 +1,30 @@ +--- +title: browser/getby-apis/getbytitle-tips +--- + +## Common use cases + +- **User interface controls:** + - Toolbar buttons and action items + - Navigation controls (previous/next, pagination) + - Media player controls + - Menu and drop-down triggers +- **Informational elements:** + - Help icons and tooltips + - Status indicators and badges + - Progress indicators + - Warning and error messages +- **Accessibility support:** + - Screen reader descriptions + - Alternative text for complex elements + - Context-sensitive help + - Form field explanations + +## Best practices + +1. **Meaningful titles**: Ensure title attributes provide clear, helpful information about the element's purpose or content. +1. **Accessibility compliance**: Use titles to enhance accessibility, especially for elements that might not have clear visual labels. +1. **Avoid redundancy**: Don't duplicate visible text in the title attribute unless providing additional context. +1. **Dynamic content**: When testing applications with changing title content, use flexible matching patterns or regular expressions. +1. **Tooltip testing**: Remember that title attributes often create tooltips on hover, which can be useful for UI testing. +1. **Internationalization**: Consider that title text may change in different language versions of your application. \ No newline at end of file From 698cd91ae2f9c3cb2ce0094b5cd58b2de39f044c Mon Sep 17 00:00:00 2001 From: AgnesToulet <35176601+AgnesToulet@users.noreply.github.com> Date: Fri, 19 Sep 2025 11:11:10 +0200 Subject: [PATCH 6/7] add doc for frame and locator classes --- .../javascript-api/k6-browser/frame/_index.md | 7 + .../k6-browser/frame/getbyalttext.md | 136 ++++++++++++++++++ .../k6-browser/frame/getbylabel.md | 133 +++++++++++++++++ .../k6-browser/frame/getbyplaceholder.md | 64 +++++++++ .../k6-browser/frame/getbyrole.md | 55 +++++++ .../k6-browser/frame/getbytestid.md | 61 ++++++++ .../k6-browser/frame/getbytext.md | 56 ++++++++ .../k6-browser/frame/getbytitle.md | 66 +++++++++ .../k6-browser/framelocator/getbylabel.md | 6 - .../k6-browser/locator/_index.md | 7 + .../k6-browser/locator/getbyalttext.md | 136 ++++++++++++++++++ .../k6-browser/locator/getbylabel.md | 133 +++++++++++++++++ .../k6-browser/locator/getbyplaceholder.md | 64 +++++++++ .../k6-browser/locator/getbyrole.md | 55 +++++++ .../k6-browser/locator/getbytestid.md | 61 ++++++++ .../k6-browser/locator/getbytext.md | 56 ++++++++ .../k6-browser/locator/getbytitle.md | 66 +++++++++ 17 files changed, 1156 insertions(+), 6 deletions(-) create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/frame/getbyalttext.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/frame/getbylabel.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/frame/getbyplaceholder.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/frame/getbyrole.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/frame/getbytestid.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/frame/getbytext.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/frame/getbytitle.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/locator/getbyalttext.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/locator/getbylabel.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/locator/getbyplaceholder.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/locator/getbyrole.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/locator/getbytestid.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/locator/getbytext.md create mode 100644 docs/sources/k6/next/javascript-api/k6-browser/locator/getbytitle.md diff --git a/docs/sources/k6/next/javascript-api/k6-browser/frame/_index.md b/docs/sources/k6/next/javascript-api/k6-browser/frame/_index.md index c3dc0a5e3b..d64a8dfbc8 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/frame/_index.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/frame/_index.md @@ -24,6 +24,13 @@ Frame represents a single frame in a browser window. It can be a top-level frame | [focus(selector[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/focus/) | Fetches an element with `selector` and focuses on it. | | [frameElement()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/frameelement) | Returns the `frame`'s `element`. | | [getAttribute(selector, name[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getattribute/) | Returns the element attribute value for the given attribute name. | +| [getByAltText(altText[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) | Returns a locator for elements with the specified `alt` attribute text. | +| [getByLabel(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) | Returns a locator for form controls with the specified label text. | +| [getByPlaceholder(placeholder[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) | Returns a locator for input elements with the specified `placeholder` attribute text. | +| [getByRole(role[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) | Returns a locator for elements with the specified ARIA role. | +| [getByTestId(testId)](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) | Returns a locator for elements with the specified `data-testid` attribute. | +| [getByText(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) | Returns a locator for elements containing the specified text. | +| [getByTitle(title[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) | Returns a locator for elements with the specified `title` attribute. | | [goto(url[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/goto/) | Navigates to the specified `url`. | | [hover(selector[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/hover/) | Hovers over an element matching `selector`. | | [innerHTML(selector[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/innerhtml/) | Returns the `element.innerHTML`. | diff --git a/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyalttext.md b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyalttext.md new file mode 100644 index 0000000000..2806e54e30 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyalttext.md @@ -0,0 +1,136 @@ +--- +title: 'getByAltText(altText[, options])' +description: 'Browser module: frame.getByAltText(altText[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-spec.md" version="" >}} + +## Examples + +### Basic alt text matching + +Find and click an image by its alt text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com'); + + const logo = page.mainFrame().getByAltText('LOGO'); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +### Exact alt text matching + +Use exact matching for precise alt text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com'); + + const logo = page.mainFrame().getByAltText('logo', { exact: true }); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +### Using regular expressions + +Find images using pattern matching: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com'); + + const logo = page.mainFrame().getByAltText(/logo/s); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-tips.md" version="" >}} + +## Related + +- [frame.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role +- [frame.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) - Locate by form labels +- [frame.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) - Locate by placeholder text +- [frame.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID +- [frame.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute +- [frame.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) - Locate by visible text diff --git a/docs/sources/k6/next/javascript-api/k6-browser/frame/getbylabel.md b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbylabel.md new file mode 100644 index 0000000000..1f36fa6c01 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbylabel.md @@ -0,0 +1,133 @@ +--- +title: 'getByLabel(text[, options])' +description: 'Browser module: frame.getByLabel(text[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-spec.md" version="" >}} + +## Examples + +### Basic form interaction + +Fill form fields using their labels: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + + + `); + + const frame = page.mainFrame(); + const username = frame.getByLabel('Username (hint: default)', { exact: true }); + const password = frame.getByLabel(/^Password.*$/); + + await username.fill('default'); + await password.fill('12345678'); + } finally { + await page.close(); + } +} +``` + +### Working with different input types + +Handle various form control types in various label association patterns: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + Password (hint: 12345678) + + + + + + + + + + + `); + + const frame = page.mainFrame(); + + // Inputs + await frame.getByLabel('Username (hint: default)', { exact: true }).fill('default'); + await frame.getByLabel(/^Password.*$/).fill('12345678'); + + // Checkbox + await frame.getByLabel('Subscribe to newsletter').check(); + + // Radio button + await frame.getByLabel('Email', { exact: true }).check(); + + // Select dropdown + await frame.getByLabel('Theme').selectOption('light'); + + // Textarea + await frame.getByLabel('Comments').fill('This is a test comment'); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-tips.md" version="" >}} + +## Related + +- [frame.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role +- [frame.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) - Locate by alt text +- [frame.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) - Locate by placeholder text +- [frame.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID +- [frame.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute +- [frame.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) - Locate by text content diff --git a/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyplaceholder.md b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyplaceholder.md new file mode 100644 index 0000000000..19cc2da9ae --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyplaceholder.md @@ -0,0 +1,64 @@ +--- +title: 'getByPlaceholder(placeholder[, options])' +description: 'Browser module: frame.getByPlaceholder(placeholder[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-spec.md" version="" >}} + +## Example + +Find and fill inputs by their placeholder text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + + + + `); + + const frame = page.mainFrame(); + await frame.getByPlaceholder('First name').fill('First'); + await frame.getByPlaceholder('Last name').fill('Last'); + await frame.getByPlaceholder('dd/mm/yyyy').fill('01/01/1990'); + + await frame.getByPlaceholder('your.email@example.com').fill('first.last@example.com'); + await frame.getByPlaceholder('+1 (555) 123-4567').fill('+1 (555) 987-6543'); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-tips.md" version="" >}} + +## Related + +- [frame.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role +- [frame.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) - Locate by alt text +- [frame.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) - Locate by form labels (preferred for accessibility) +- [frame.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID +- [frame.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute +- [frame.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) - Locate by visible text diff --git a/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyrole.md b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyrole.md new file mode 100644 index 0000000000..341f45144e --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbyrole.md @@ -0,0 +1,55 @@ +--- +title: 'getByRole(role[, options])' +description: 'Browser module: frame.getByRole(role[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyrole-spec.md" version="" >}} + +## Examples + +### Basic role selection + +Find and click a button by its role: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com/'); + + const frame = page.mainFrame(); + await frame.getByRole('button', { name: 'Pizza, Please!' }).click(); + } finally { + page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyrole-tips.md" version="" >}} + +## Related + +- [frame.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) - Locate by alt text +- [frame.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) - Locate by form labels +- [frame.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) - Locate by placeholder text +- [frame.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID +- [frame.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) - Locate by text content +- [frame.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytestid.md b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytestid.md new file mode 100644 index 0000000000..b6d53905ca --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytestid.md @@ -0,0 +1,61 @@ +--- +title: 'getByTestId(testId)' +description: 'Browser module: frame.getByTestId(testId) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytestid-spec.md" version="" >}} + +## Examples + +### Basic test ID usage + +Locate and interact with elements using test IDs: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + + `); + + const frame = page.mainFrame(); + await frame.getByTestId('username').fill('FirstLast'); + await frame.getByTestId('email').fill('firstlast@example.com'); + await frame.getByTestId('submit-button').click(); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytestid-tips.md" version="" >}} + +## Related + +- [frame.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role +- [frame.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) - Locate by alt text +- [frame.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) - Locate by form labels +- [frame.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) - Locate by placeholder text +- [frame.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) - Locate by text content +- [frame.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytext.md b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytext.md new file mode 100644 index 0000000000..ec55e197a5 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytext.md @@ -0,0 +1,56 @@ +--- +title: 'getByText(text[, options])' +description: 'Browser module: frame.getByText(text[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytext-spec.md" version="" >}} + +## Examples + +Find and click elements by their visible text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com/'); + + const frame = page.mainFrame(); + await frame.getByText('Pizza, Please!').click(); + + const noThanksBtn = frame.getByText('No thanks'); + await noThanksBtn.click(); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytext-tips.md" version="" >}} + +## Related + +- [frame.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role +- [frame.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) - Locate by alt text +- [frame.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) - Locate by form labels +- [frame.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) - Locate by placeholder text +- [frame.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID +- [frame.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytitle.md b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytitle.md new file mode 100644 index 0000000000..f2627a00df --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/frame/getbytitle.md @@ -0,0 +1,66 @@ +--- +title: 'getByTitle(title[, options])' +description: 'Browser module: frame.getByTitle(title[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytitle-spec.md" version="" >}} + +## Examples + +Find and interact with elements by their title attribute: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + + `); + + const frame = page.mainFrame(); + + await frame.getByTitle('Hello World').click(); + + await frame.getByTitle('Favorite Color').selectOption('Red'); + + await frame.getByTitle('Check me').check(); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytitle-tips.md" version="" >}} + +## Related + +- [frame.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role +- [frame.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) - Locate by alt text +- [frame.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) - Locate by form labels +- [frame.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) - Locate by placeholder text +- [frame.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID +- [frame.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) - Locate by visible text diff --git a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md index 63dcbbda21..3300ef14ac 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbylabel.md @@ -5,12 +5,6 @@ description: 'Browser module: frameLocator.getByLabel(text[, options]) method' {{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-spec.md" version="" >}} -## Returns - -| Type | Description | -| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| [Locator](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the form control associated with the specified label. | - ## Examples ### Basic form interaction diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md index 0bb648b0a3..37a09df6d1 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md @@ -30,6 +30,13 @@ Locator can be created with the [page.locator(selector[, options])](https://graf | [first()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/first) | Returns a `locator` to the first matching element. | | [focus([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/focus) | Calls [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the element, if it can be focused. | | [getAttribute(name, [options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getattribute) | Returns the element attribute value for the given attribute name. | +| [getByAltText(altText[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) | Returns a locator for elements with the specified `alt` attribute text. | +| [getByLabel(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) | Returns a locator for form controls with the specified label text. | +| [getByPlaceholder(placeholder[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) | Returns a locator for input elements with the specified `placeholder` attribute text. | +| [getByRole(role[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) | Returns a locator for elements with the specified ARIA role. | +| [getByTestId(testId)](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) | Returns a locator for elements with the specified `data-testid` attribute. | +| [getByText(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) | Returns a locator for elements containing the specified text. | +| [getByTitle(title[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) | Returns a locator for elements with the specified `title` attribute. | | [hover([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/hover) {{< docs/bwipt id="471" >}} | Hovers over the element. | | [innerHTML([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/innerhtml) | Returns the `element.innerHTML`. | | [innerText([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/innertext) | Returns the `element.innerText`. | diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyalttext.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyalttext.md new file mode 100644 index 0000000000..9a1aaf1d62 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyalttext.md @@ -0,0 +1,136 @@ +--- +title: 'getByAltText(altText[, options])' +description: 'Browser module: locator.getByAltText(altText[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-spec.md" version="" >}} + +## Examples + +### Basic alt text matching + +Find and click an image by its alt text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com'); + + const logo = page.locator('document').getByAltText('LOGO'); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +### Exact alt text matching + +Use exact matching for precise alt text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com'); + + const logo = page.locator(':root').getByAltText('logo', { exact: true }); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +### Using regular expressions + +Find images using pattern matching: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com'); + + const logo = page.locator(':root').getByAltText(/logo/s); + await logo.waitFor(); + + await logo.click(); + await page.waitForLoadState(); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-tips.md" version="" >}} + +## Related + +- [locator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyrole/) - Locate by ARIA role +- [locator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbylabel/) - Locate by form labels +- [locator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyplaceholder/) - Locate by placeholder text +- [locator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytestid/) - Locate by test ID +- [locator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytitle/) - Locate by title attribute +- [locator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytext/) - Locate by visible text diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbylabel.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbylabel.md new file mode 100644 index 0000000000..00fa812a94 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbylabel.md @@ -0,0 +1,133 @@ +--- +title: 'getByLabel(text[, options])' +description: 'Browser module: locator.getByLabel(text[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-spec.md" version="" >}} + +## Examples + +### Basic form interaction + +Fill form fields using their labels: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + ui: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + + + `); + + const locator = page.locator(':root'); + const username = locator.getByLabel('Username (hint: default)', { exact: true }); + const password = locator.getByLabel(/^Password.*$/); + + await username.fill('default'); + await password.fill('12345678'); + } finally { + await page.close(); + } +} +``` + +### Working with different input types + +Handle various form control types in various label association patterns: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + Password (hint: 12345678) + + + + + + + + + + + `); + + const locator = page.locator(':root'); + + // Inputs + await locator.getByLabel('Username (hint: default)', { exact: true }).fill('default'); + await locator.getByLabel(/^Password.*$/).fill('12345678'); + + // Checkbox + await locator.getByLabel('Subscribe to newsletter').check(); + + // Radio button + await locator.getByLabel('Email', { exact: true }).check(); + + // Select dropdown + await locator.getByLabel('Theme').selectOption('light'); + + // Textarea + await locator.getByLabel('Comments').fill('This is a test comment'); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-tips.md" version="" >}} + +## Related + +- [locator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyrole/) - Locate by ARIA role +- [locator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyalttext/) - Locate by alt text +- [locator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyplaceholder/) - Locate by placeholder text +- [locator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytestid/) - Locate by test ID +- [locator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytitle/) - Locate by title attribute +- [locator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytext/) - Locate by text content diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyplaceholder.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyplaceholder.md new file mode 100644 index 0000000000..d1db800943 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyplaceholder.md @@ -0,0 +1,64 @@ +--- +title: 'getByPlaceholder(placeholder[, options])' +description: 'Browser module: locator.getByPlaceholder(placeholder[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-spec.md" version="" >}} + +## Example + +Find and fill inputs by their placeholder text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + + + + `); + + const locator = page.locator(':root'); + await locator.getByPlaceholder('First name').fill('First'); + await locator.getByPlaceholder('Last name').fill('Last'); + await locator.getByPlaceholder('dd/mm/yyyy').fill('01/01/1990'); + + await locator.getByPlaceholder('your.email@example.com').fill('first.last@example.com'); + await locator.getByPlaceholder('+1 (555) 123-4567').fill('+1 (555) 987-6543'); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-tips.md" version="" >}} + +## Related + +- [locator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyrole/) - Locate by ARIA role +- [locator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyalttext/) - Locate by alt text +- [locator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbylabel/) - Locate by form labels (preferred for accessibility) +- [locator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytestid/) - Locate by test ID +- [locator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytitle/) - Locate by title attribute +- [locator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytext/) - Locate by visible text diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyrole.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyrole.md new file mode 100644 index 0000000000..1ec9e7a48c --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyrole.md @@ -0,0 +1,55 @@ +--- +title: 'getByRole(role[, options])' +description: 'Browser module: locator.getByRole(role[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyrole-spec.md" version="" >}} + +## Examples + +### Basic role selection + +Find and click a button by its role: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com/'); + + const locator = page.locator(':root'); + await locator.getByRole('button', { name: 'Pizza, Please!' }).click(); + } finally { + page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbyrole-tips.md" version="" >}} + +## Related + +- [locator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyalttext/) - Locate by alt text +- [locator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbylabel/) - Locate by form labels +- [locator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyplaceholder/) - Locate by placeholder text +- [locator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytestid/) - Locate by test ID +- [locator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytext/) - Locate by text content +- [locator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytestid.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytestid.md new file mode 100644 index 0000000000..365f16162b --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytestid.md @@ -0,0 +1,61 @@ +--- +title: 'getByTestId(testId)' +description: 'Browser module: locator.getByTestId(testId) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytestid-spec.md" version="" >}} + +## Examples + +### Basic test ID usage + +Locate and interact with elements using test IDs: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + + `); + + const locator = page.locator(':root'); + await locator.getByTestId('username').fill('FirstLast'); + await locator.getByTestId('email').fill('firstlast@example.com'); + await locator.getByTestId('submit-button').click(); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytestid-tips.md" version="" >}} + +## Related + +- [locator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyrole/) - Locate by ARIA role +- [locator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyalttext/) - Locate by alt text +- [locator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbylabel/) - Locate by form labels +- [locator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyplaceholder/) - Locate by placeholder text +- [locator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytext/) - Locate by text content +- [locator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytext.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytext.md new file mode 100644 index 0000000000..c375c1f7ba --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytext.md @@ -0,0 +1,56 @@ +--- +title: 'getByText(text[, options])' +description: 'Browser module: locator.getByText(text[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytext-spec.md" version="" >}} + +## Examples + +Find and click elements by their visible text: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.goto('https://quickpizza.grafana.com/'); + + const locator = page.locator(':root'); + await locator.getByText('Pizza, Please!').click(); + + const noThanksBtn = locator.getByText('No thanks'); + await noThanksBtn.click(); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytext-tips.md" version="" >}} + +## Related + +- [locator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyrole/) - Locate by ARIA role +- [locator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyalttext/) - Locate by alt text +- [locator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbylabel/) - Locate by form labels +- [locator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyplaceholder/) - Locate by placeholder text +- [locator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytestid/) - Locate by test ID +- [locator.getByTitle()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytitle/) - Locate by title attribute diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytitle.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytitle.md new file mode 100644 index 0000000000..7f3fff44d0 --- /dev/null +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbytitle.md @@ -0,0 +1,66 @@ +--- +title: 'getByTitle(title[, options])' +description: 'Browser module: locator.getByTitle(title[, options]) method' +--- + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytitle-spec.md" version="" >}} + +## Examples + +Find and interact with elements by their title attribute: + + + +```javascript +import { browser } from 'k6/browser'; + +export const options = { + scenarios: { + browser: { + executor: 'shared-iterations', + options: { + browser: { + type: 'chromium', + }, + }, + }, + }, +}; + +export default async function () { + const page = await browser.newPage(); + + try { + await page.setContent(` + + + + `); + + const locator = page.locator(':root'); + + await locator.getByTitle('Hello World').click(); + + await locator.getByTitle('Favorite Color').selectOption('Red'); + + await locator.getByTitle('Check me').check(); + } finally { + await page.close(); + } +} +``` + +{{< docs/shared source="k6" lookup="browser/getby-apis/getbytitle-tips.md" version="" >}} + +## Related + +- [locator.getByRole()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyrole/) - Locate by ARIA role +- [locator.getByAltText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyalttext/) - Locate by alt text +- [locator.getByLabel()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbylabel/) - Locate by form labels +- [locator.getByPlaceholder()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyplaceholder/) - Locate by placeholder text +- [locator.getByTestId()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytestid/) - Locate by test ID +- [locator.getByText()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytext/) - Locate by visible text From b9535a314566a93b687f53182f8a3808bbf01f4d Mon Sep 17 00:00:00 2001 From: AgnesToulet <35176601+AgnesToulet@users.noreply.github.com> Date: Fri, 19 Sep 2025 11:28:32 +0200 Subject: [PATCH 7/7] small fixes from self review --- .../javascript-api/k6-browser/locator/_index.md | 14 +++++++------- .../k6-browser/locator/getbyalttext.md | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md index 37a09df6d1..964ac65795 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/_index.md @@ -30,13 +30,13 @@ Locator can be created with the [page.locator(selector[, options])](https://graf | [first()](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/first) | Returns a `locator` to the first matching element. | | [focus([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/focus) | Calls [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the element, if it can be focused. | | [getAttribute(name, [options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getattribute) | Returns the element attribute value for the given attribute name. | -| [getByAltText(altText[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyalttext/) | Returns a locator for elements with the specified `alt` attribute text. | -| [getByLabel(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbylabel/) | Returns a locator for form controls with the specified label text. | -| [getByPlaceholder(placeholder[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyplaceholder/) | Returns a locator for input elements with the specified `placeholder` attribute text. | -| [getByRole(role[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbyrole/) | Returns a locator for elements with the specified ARIA role. | -| [getByTestId(testId)](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytestid/) | Returns a locator for elements with the specified `data-testid` attribute. | -| [getByText(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytext/) | Returns a locator for elements containing the specified text. | -| [getByTitle(title[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/frame/getbytitle/) | Returns a locator for elements with the specified `title` attribute. | +| [getByAltText(altText[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyalttext/) | Returns a locator for elements with the specified `alt` attribute text. | +| [getByLabel(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbylabel/) | Returns a locator for form controls with the specified label text. | +| [getByPlaceholder(placeholder[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyplaceholder/) | Returns a locator for input elements with the specified `placeholder` attribute text. | +| [getByRole(role[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbyrole/) | Returns a locator for elements with the specified ARIA role. | +| [getByTestId(testId)](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytestid/) | Returns a locator for elements with the specified `data-testid` attribute. | +| [getByText(text[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytext/) | Returns a locator for elements containing the specified text. | +| [getByTitle(title[, options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/getbytitle/) | Returns a locator for elements with the specified `title` attribute. | | [hover([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/hover) {{< docs/bwipt id="471" >}} | Hovers over the element. | | [innerHTML([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/innerhtml) | Returns the `element.innerHTML`. | | [innerText([options])](https://grafana.com/docs/k6//javascript-api/k6-browser/locator/innertext) | Returns the `element.innerText`. | diff --git a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyalttext.md b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyalttext.md index 9a1aaf1d62..39a422108f 100644 --- a/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyalttext.md +++ b/docs/sources/k6/next/javascript-api/k6-browser/locator/getbyalttext.md @@ -35,7 +35,7 @@ export default async function () { try { await page.goto('https://quickpizza.grafana.com'); - const logo = page.locator('document').getByAltText('LOGO'); + const logo = page.locator(':root').getByAltText('LOGO'); await logo.waitFor(); await logo.click();