Skip to content

Commit b03f9b4

Browse files
heitortsergentheitortsergent
authored
Style guide and Vale fixes for getBy pages (#2045)
* Style guide and Vale fixes for getBy pages * Apply to v1.2
1 parent d720c0e commit b03f9b4

File tree

14 files changed

+422
-560
lines changed

14 files changed

+422
-560
lines changed

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

Lines changed: 31 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,21 @@ description: 'Browser module: page.getByAltText(altText[, options]) method'
77

88
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.
99

10-
<TableWithNestedRows>
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. |
1115

12-
| Parameter | Type | Default | Description |
13-
| ------------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
14-
| altText | string\|RegExp | - | Required. The alt text to search for. Can be a string for exact match or a RegExp for pattern matching. |
15-
| options | object | `null` | |
16-
| options.exact | boolean | `false` | Whether to match the alt text exactly with case sensitivity. When `true`, performs a case-sensitive match. |
16+
## Returns
1717

18-
</TableWithNestedRows>
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. |
1921

20-
### Returns
22+
## Examples
2123

22-
| Type | Description |
23-
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
24-
| [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 alt text. |
25-
26-
### Examples
27-
28-
#### Basic alt text matching
24+
### Basic alt text matching
2925

3026
Find and click an image by its alt text:
3127

@@ -64,7 +60,7 @@ export default async function () {
6460
}
6561
```
6662

67-
#### Exact alt text matching
63+
### Exact alt text matching
6864

6965
Use exact matching for precise alt text:
7066

@@ -103,7 +99,7 @@ export default async function () {
10399
}
104100
```
105101

106-
#### Using regular expressions
102+
### Using regular expressions
107103

108104
Find images using pattern matching:
109105

@@ -142,38 +138,29 @@ export default async function () {
142138
}
143139
```
144140

145-
### Common use cases
146-
147-
**Image testing:**
148-
149-
- Testing image alt text for accessibility compliance
150-
- Interacting with clickable images/banners
151-
152-
**Accessibility testing:**
153-
154-
- Ensuring all images have meaningful alt text
155-
- Testing screen reader compatibility
156-
- Validating WCAG compliance
141+
## Common use cases
157142

158-
**UI interaction:**
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
159154

160-
- Clicking on logo images to navigate home
161-
- Selecting images in galleries or carousels
162-
- Interacting with image-based buttons
163-
164-
### Best practices
155+
## Best practices
165156

166157
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.
167162

168-
2. **Prefer exact matches**: Use `exact: true` when you need precise matching to avoid false positives.
169-
170-
3. **Accessibility-first**: Using `getByAltText()` encourages better accessibility practices by ensuring images have proper alt attributes.
171-
172-
4. **Regular expressions for patterns**: Use RegExp for flexible matching when dealing with dynamic or numbered content.
173-
174-
5. **Combine with assertions**: Always verify that the located elements behave as expected using assertions.
175-
176-
### Related
163+
## Related
177164

178165
- [page.getByRole()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbyrole/) - Locate by ARIA role
179166
- [page.getByLabel()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbylabel/) - Locate by form labels

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

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,21 @@ description: 'Browser module: page.getByLabel(text[, options]) method'
77

88
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.
99

10-
<TableWithNestedRows>
10+
| Parameter | Type | Default | Description |
11+
| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
12+
| `text` | string \| RegExp | - | Required. The label 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 label text exactly with case sensitivity. When `true`, performs a case-sensitive match. |
1115

12-
| Parameter | Type | Default | Description |
13-
| ------------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
14-
| text | string\|RegExp | - | Required. The label text to search for. Can be a string for exact match or a RegExp for pattern matching. |
15-
| options | object | `null` | |
16-
| options.exact | boolean | `false` | Whether to match the label text exactly with case sensitivity. When `true`, performs a case-sensitive match. |
17-
18-
</TableWithNestedRows>
19-
20-
### Returns
16+
## Returns
2117

2218
| Type | Description |
2319
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
2420
| [Locator](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/locator/) | A locator object that can be used to interact with the form control associated with the specified label. |
2521

26-
### Examples
22+
## Examples
2723

28-
#### Basic form interaction
24+
### Basic form interaction
2925

3026
Fill form fields using their labels:
3127

@@ -69,7 +65,7 @@ export default async function () {
6965
}
7066
```
7167

72-
#### Working with different input types
68+
### Working with different input types
7369

7470
Handle various form control types in various label association patterns:
7571

@@ -136,52 +132,49 @@ export default async function () {
136132
}
137133
```
138134

139-
### Label association patterns
135+
## Label association patterns
140136

141137
The `getByLabel()` method works with several HTML patterns for associating labels with form controls:
142138

143-
**1. Explicit association with `for` attribute:**
139+
1. Explicit association with `for` attribute:
144140

145-
<!-- eslint-skip -->
141+
<!-- eslint-skip -->
146142

147-
```html
148-
<label for="username">Username</label> <input type="text" id="username" name="username" />
149-
```
143+
```html
144+
<label for="username">Username</label> <input type="text" id="username" name="username" />
145+
```
150146

151-
**2. ARIA labeling:**
147+
1. ARIA labeling:
152148

153-
<!-- eslint-skip -->
149+
<!-- eslint-skip -->
154150

155-
```html
156-
<span id="username-label">Username</span> <input type="text" aria-labelledby="username-label" />
157-
```
151+
```html
152+
<span id="username-label">Username</span> <input type="text" aria-labelledby="username-label" />
153+
```
158154

159-
**3. ARIA label attribute:**
155+
1. ARIA label attribute:
160156

161-
<!-- eslint-skip -->
157+
<!-- eslint-skip -->
162158

163-
```html
164-
<input type="text" aria-label="Username" />
165-
```
159+
```html
160+
<input type="text" aria-label="Username" />
161+
```
166162

167-
### Common use cases
163+
## Common use cases
168164

169165
- **Form testing**: Login forms, registration forms, contact forms
170166
- **E-commerce**: Checkout forms, shipping information, payment details
171167
- **Settings pages**: User preferences, account settings, configuration forms
172168
- **Accessibility testing**: Ensuring proper label association and screen reader compatibility
173169

174-
### Best practices
170+
## Best practices
175171

176172
1. **Accessibility-first approach**: Using `getByLabel()` ensures your tests work the same way users with assistive technology interact with forms.
173+
1. **Meaningful labels**: Encourage developers to use descriptive, unique label text that clearly identifies the form control's purpose.
174+
1. **Required field indicators**: When testing required fields, include any visual indicators (like asterisks) in your label text matching.
175+
1. **Form validation testing**: Use labels to test form validation scenarios, as they provide a stable way to identify fields regardless of styling changes.
177176

178-
2. **Meaningful labels**: Encourage developers to use descriptive, unique label text that clearly identifies the form control's purpose.
179-
180-
3. **Required field indicators**: When testing required fields, include any visual indicators (like asterisks) in your label text matching.
181-
182-
4. **Form validation testing**: Use labels to test form validation scenarios, as they provide a stable way to identify fields regardless of styling changes.
183-
184-
### Related
177+
## Related
185178

186179
- [page.getByRole()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbyrole/) - Locate by ARIA role
187180
- [page.getByAltText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbyalttext/) - Locate by alt text

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

Lines changed: 33 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,19 @@ description: 'Browser module: page.getByPlaceholder(placeholder[, options]) meth
77

88
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.
99

10-
<TableWithNestedRows>
10+
| Parameter | Type | Default | Description |
11+
| --------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
12+
| `placeholder` | string \| RegExp | - | Required. The placeholder 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 placeholder text exactly with case sensitivity. When `true`, performs a case-sensitive match. |
1115

12-
| Parameter | Type | Default | Description |
13-
| ------------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
14-
| placeholder | string\|RegExp | - | Required. The placeholder text to search for. Can be a string for exact match or a RegExp for pattern matching. |
15-
| options | object | `null` | |
16-
| options.exact | boolean | `false` | Whether to match the placeholder text exactly with case sensitivity. When `true`, performs a case-sensitive match. |
16+
## Returns
1717

18-
</TableWithNestedRows>
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 the input elements matching the specified placeholder text. |
1921

20-
### Returns
21-
22-
| Type | Description |
23-
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
24-
| [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 element(s) matching the specified placeholder text. |
25-
26-
### Examples
22+
## Examples
2723

2824
Find and fill inputs by their placeholder text:
2925

@@ -69,40 +65,32 @@ export default async function () {
6965
}
7066
```
7167

72-
### Common use cases
73-
74-
**Form field identification:**
75-
76-
- Login and registration forms without explicit labels
77-
- Quick search boxes
78-
- Filter and input controls
79-
- Comment and feedback forms
80-
81-
**E-commerce:**
82-
83-
- Product search bars
84-
- Quantity input fields
85-
- Promo code entry
86-
- Address and payment information
87-
88-
**Interactive applications:**
89-
90-
- Chat input fields
91-
- Command input interfaces
92-
- Settings and configuration forms
93-
- Data entry applications
94-
95-
### Best practices
68+
## Common use cases
69+
70+
- **Form field identification:**
71+
- Login and registration forms without explicit labels
72+
- Quick search boxes
73+
- Filter and input controls
74+
- Comment and feedback forms
75+
- **E-commerce:**
76+
- Product search bars
77+
- Quantity input fields
78+
- Promo code entry
79+
- Address and payment information
80+
- **Interactive applications:**
81+
- Chat input fields
82+
- Command input interfaces
83+
- Settings and configuration forms
84+
- Data entry applications
85+
86+
## Best practices
9687

9788
1. **Complement, don't replace labels**: Placeholder text should supplement, not replace proper form labels for accessibility.
89+
1. **Use descriptive placeholders**: Ensure placeholder text clearly indicates the expected input format or content.
90+
1. **Consider internationalization**: When testing multi-language applications, be aware that placeholder text may change.
91+
1. **Accessibility considerations**: Remember that placeholder text alone may not be sufficient for users with disabilities.
9892

99-
2. **Use descriptive placeholders**: Ensure placeholder text clearly indicates the expected input format or content.
100-
101-
3. **Consider internationalization**: When testing multi-language applications, be aware that placeholder text may change.
102-
103-
4. **Accessibility considerations**: Remember that placeholder text alone may not be sufficient for users with disabilities.
104-
105-
### Related
93+
## Related
10694

10795
- [page.getByRole()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbyrole/) - Locate by ARIA role
10896
- [page.getByAltText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/page/getbyalttext/) - Locate by alt text

0 commit comments

Comments
 (0)