Skip to content

Commit a9b1165

Browse files
AgnesTouletAgnesToulet
committed
move getbyalttext common content to shared doc
1 parent fe7d3d9 commit a9b1165

File tree

4 files changed

+48
-72
lines changed

4 files changed

+48
-72
lines changed

‎docs/sources/k6/next/javascript-api/k6-browser/framelocator/getbyalttext.md‎

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,7 @@ title: 'getByAltText(altText[, options])'
33
description: 'Browser module: frameLocator.getByAltText(altText[, options]) method'
44
---
55

6-
# getByAltText(altText[, options])
7-
8-
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.
9-
10-
| Parameter | Type | Default | Description |
11-
| --------------- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
12-
| `altText` | string \| RegExp | - | Required. The alt text to search for. Can be a string for exact match or a RegExp for pattern matching. |
13-
| `options` | object | `null` | |
14-
| `options.exact` | boolean | `false` | Whether to match the alt text exactly with case sensitivity. When `true`, performs a case-sensitive match. |
15-
16-
## Returns
17-
18-
| Type | Description |
19-
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
20-
| [Locator](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/) | A locator object that can be used to interact with elements matching the specified alt text. |
6+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-spec.md" version="<K6_VERSION>" >}}
217

228
## Examples
239

@@ -144,27 +130,7 @@ export default async function () {
144130
}
145131
```
146132

147-
## Common use cases
148-
149-
- **Image testing:**
150-
- Testing image alt text for accessibility compliance
151-
- Interacting with clickable images/banners
152-
- **Accessibility testing:**
153-
- Ensuring all images have meaningful alt text
154-
- Testing screen reader compatibility
155-
- Validating WCAG compliance
156-
- **UI interaction:**
157-
- Clicking on logo images to navigate home
158-
- Selecting images in galleries or carousels
159-
- Interacting with image-based buttons
160-
161-
## Best practices
162-
163-
1. **Use descriptive alt text**: When creating tests, ensure your application uses meaningful alt text that describes the image content or function.
164-
1. **Prefer exact matches**: Use `exact: true` when you need precise matching to avoid false positives.
165-
1. **Accessibility-first**: Using `getByAltText()` encourages better accessibility practices by ensuring images have proper alt attributes.
166-
1. **Regular expressions for patterns**: Use RegExp for flexible matching when dealing with dynamic or numbered content.
167-
1. **Combine with assertions**: Always verify that the located elements behave as expected using assertions.
133+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-tips.md" version="<K6_VERSION>" >}}
168134

169135
## Related
170136

‎docs/sources/k6/next/javascript-api/k6-browser/page/getbyalttext.md‎

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,7 @@ title: 'getByAltText(altText[, options])'
33
description: 'Browser module: page.getByAltText(altText[, options]) method'
44
---
55

6-
# getByAltText(altText[, options])
7-
8-
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.
9-
10-
| Parameter | Type | Default | Description |
11-
| --------------- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
12-
| `altText` | string \| RegExp | - | Required. The alt text to search for. Can be a string for exact match or a RegExp for pattern matching. |
13-
| `options` | object | `null` | |
14-
| `options.exact` | boolean | `false` | Whether to match the alt text exactly with case sensitivity. When `true`, performs a case-sensitive match. |
15-
16-
## Returns
17-
18-
| Type | Description |
19-
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
20-
| [Locator](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/) | A locator object that can be used to interact with elements matching the specified alt text. |
6+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-spec.md" version="<K6_VERSION>" >}}
217

228
## Examples
239

@@ -138,27 +124,7 @@ export default async function () {
138124
}
139125
```
140126

141-
## Common use cases
142-
143-
- **Image testing:**
144-
- Testing image alt text for accessibility compliance
145-
- Interacting with clickable images/banners
146-
- **Accessibility testing:**
147-
- Ensuring all images have meaningful alt text
148-
- Testing screen reader compatibility
149-
- Validating WCAG compliance
150-
- **UI interaction:**
151-
- Clicking on logo images to navigate home
152-
- Selecting images in galleries or carousels
153-
- Interacting with image-based buttons
154-
155-
## Best practices
156-
157-
1. **Use descriptive alt text**: When creating tests, ensure your application uses meaningful alt text that describes the image content or function.
158-
1. **Prefer exact matches**: Use `exact: true` when you need precise matching to avoid false positives.
159-
1. **Accessibility-first**: Using `getByAltText()` encourages better accessibility practices by ensuring images have proper alt attributes.
160-
1. **Regular expressions for patterns**: Use RegExp for flexible matching when dealing with dynamic or numbered content.
161-
1. **Combine with assertions**: Always verify that the located elements behave as expected using assertions.
127+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-tips.md" version="<K6_VERSION>" >}}
162128

163129
## Related
164130

‎docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-spec.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: browser/getby-apis/getbyalttext-spec
3+
---
4+
5+
# getByAltText(altText[, options])
6+
7+
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.
8+
9+
| Parameter | Type | Default | Description |
10+
| --------------- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
11+
| `altText` | string \| RegExp | - | Required. The alt text to search for. Can be a string for exact match or a RegExp for pattern matching. |
12+
| `options` | object | `null` | |
13+
| `options.exact` | boolean | `false` | Whether to match the alt text exactly with case sensitivity. When `true`, performs a case-sensitive match. |
14+
15+
## Returns
16+
17+
| Type | Description |
18+
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
19+
| [Locator](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/) | A locator object that can be used to interact with elements matching the specified alt text. |

‎docs/sources/k6/next/shared/browser/getby-apis/getbyalttext-tips.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: browser/getby-apis/getbyalttext-tips
3+
---
4+
5+
## Common use cases
6+
7+
- **Image testing:**
8+
- Testing image alt text for accessibility compliance
9+
- Interacting with clickable images/banners
10+
- **Accessibility testing:**
11+
- Ensuring all images have meaningful alt text
12+
- Testing screen reader compatibility
13+
- Validating WCAG compliance
14+
- **UI interaction:**
15+
- Clicking on logo images to navigate home
16+
- Selecting images in galleries or carousels
17+
- Interacting with image-based buttons
18+
19+
## Best practices
20+
21+
1. **Use descriptive alt text**: When creating tests, ensure your application uses meaningful alt text that describes the image content or function.
22+
1. **Prefer exact matches**: Use `exact: true` when you need precise matching to avoid false positives.
23+
1. **Accessibility-first**: Using `getByAltText()` encourages better accessibility practices by ensuring images have proper alt attributes.
24+
1. **Regular expressions for patterns**: Use RegExp for flexible matching when dealing with dynamic or numbered content.
25+
1. **Combine with assertions**: Always verify that the located elements behave as expected using assertions.

0 commit comments

Comments
 (0)