|
| 1 | +--- |
| 2 | +title: 'getByTestId(testId)' |
| 3 | +description: 'Browser module: page.getByTestId(testId) method' |
| 4 | +--- |
| 5 | + |
| 6 | +# getByTestId(testId) |
| 7 | + |
| 8 | +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. |
| 9 | + |
| 10 | +<TableWithNestedRows> |
| 11 | + |
| 12 | +| Parameter | Type | Default | Description | |
| 13 | +| --------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | |
| 14 | +| 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. | |
| 15 | + |
| 16 | +</TableWithNestedRows> |
| 17 | + |
| 18 | +### Returns |
| 19 | + |
| 20 | +| Type | Description | |
| 21 | +| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | |
| 22 | +| [Locator](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the element(s) matching the specified test ID. | |
| 23 | + |
| 24 | +### Examples |
| 25 | + |
| 26 | +#### Basic test ID usage |
| 27 | + |
| 28 | +Locate and interact with elements using test IDs: |
| 29 | + |
| 30 | +{{< code >}} |
| 31 | + |
| 32 | +```javascript |
| 33 | +import { browser } from 'k6/browser'; |
| 34 | + |
| 35 | +export const options = { |
| 36 | + scenarios: { |
| 37 | + browser: { |
| 38 | + executor: 'shared-iterations', |
| 39 | + options: { |
| 40 | + browser: { |
| 41 | + type: 'chromium', |
| 42 | + }, |
| 43 | + }, |
| 44 | + }, |
| 45 | + }, |
| 46 | +}; |
| 47 | + |
| 48 | +export default async function () { |
| 49 | + const page = await browser.newPage(); |
| 50 | + |
| 51 | + try { |
| 52 | + await page.setContent(` |
| 53 | + <input type="text" data-testid="username"> |
| 54 | + <input type="text" data-testid="email"> |
| 55 | + <button data-testid="submit-button">Submit</button> |
| 56 | + `); |
| 57 | + |
| 58 | + await page.getByTestId('username').fill('FirstLast'); |
| 59 | + await page. getByTestId( 'email'). fill( '[email protected]'); |
| 60 | + await page.getByTestId('submit-button').click(); |
| 61 | + } finally { |
| 62 | + await page.close(); |
| 63 | + } |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +{{< /code >}} |
| 68 | + |
| 69 | +### Best practices |
| 70 | + |
| 71 | +1. **Stable identifiers**: Use meaningful, stable test IDs that won't change with refactoring or content updates. |
| 72 | + |
| 73 | +2. **Hierarchical naming**: Use consistent naming conventions like `user-profile-edit-btn`. |
| 74 | + |
| 75 | +3. **Avoid duplicates**: Ensure test IDs are unique within the page to prevent ambiguity. |
| 76 | + |
| 77 | +4. **Strategic placement**: Add test IDs to key interactive elements and components that are frequently tested. |
| 78 | + |
| 79 | +5. **Team coordination**: Establish test ID conventions with your development team to ensure consistency. |
| 80 | + |
| 81 | +### Related |
| 82 | + |
| 83 | +- [page.getByRole()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbyrole/) - Locate by ARIA role |
| 84 | +- [page.getByAltText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbyalttext/) - Locate by alt text |
| 85 | +- [page.getByLabel()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbylabel/) - Locate by form labels |
| 86 | +- [page.getByPlaceholder()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbyplaceholder/) - Locate by placeholder text |
| 87 | +- [page.getByText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbytext/) - Locate by text content |
| 88 | +- [page.getByTitle()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbytitle/) - Locate by title attribute |
0 commit comments