move every getBy methods to shared folder

Author: AgnesToulet

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="<K6_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:
-
-   <!-- eslint-skip -->
-
-   ```html
-   <label for="username">Username</label> <input type="text" id="username" name="username" />
-   ```
-
-1. ARIA labeling:
-
-   <!-- eslint-skip -->
-
-   ```html
-   <span id="username-label">Username</span> <input type="text" aria-labelledby="username-label" />
-   ```
-
-1. ARIA label attribute:
-
-   <!-- eslint-skip -->
-
-   ```html
-   <input type="text" aria-label="Username" />
-   ```
-
-## 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="<K6_VERSION>" >}}
 
 ## Related
 

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/<K6_VERSION>/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="<K6_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="<K6_VERSION>" >}}
 
 ## Related
 

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/<K6_VERSION>/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="<K6_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:**
-
-<!-- md-k6:skip -->
-<!-- eslint-skip -->
-
-```javascript
-// Text inputs
-await frameLocator.getByRole('textbox', { name: 'Email' }).fill('[email protected]');
-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:**
-
-<!-- md-k6:skip -->
-<!-- eslint-skip -->
-
-```javascript
-// Tabs
-await frameLocator.getByRole('tab', { name: 'Overview' }).click();
-await expect(frameLocator.getByRole('tabpanel', { name: 'Overview' })).toBeVisible();
-```
-
-- **Content Verification:**
-
-<!-- md-k6:skip -->
-<!-- eslint-skip -->
-
-```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="<K6_VERSION>" >}}
 
 ## Related
 

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/<K6_VERSION>/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="<K6_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="<K6_VERSION>" >}}
 
 ## Related