Skip to content

Commit 698cd91

Browse files
AgnesTouletAgnesToulet
committed
add doc for frame and locator classes
1 parent 3ae0bcd commit 698cd91

File tree

17 files changed

+1156
-6
lines changed

17 files changed

+1156
-6
lines changed

‎docs/sources/k6/next/javascript-api/k6-browser/frame/_index.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ Frame represents a single frame in a browser window. It can be a top-level frame
2424
| [focus(selector[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/focus/) | Fetches an element with `selector` and focuses on it. |
2525
| [frameElement()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/frameelement) | Returns the `frame`'s `element`. |
2626
| [getAttribute(selector, name[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getattribute/) | Returns the element attribute value for the given attribute name. |
27+
| [getByAltText(altText[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyalttext/) | Returns a locator for elements with the specified `alt` attribute text. |
28+
| [getByLabel(text[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbylabel/) | Returns a locator for form controls with the specified label text. |
29+
| [getByPlaceholder(placeholder[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyplaceholder/) | Returns a locator for input elements with the specified `placeholder` attribute text. |
30+
| [getByRole(role[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyrole/) | Returns a locator for elements with the specified ARIA role. |
31+
| [getByTestId(testId)](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytestid/) | Returns a locator for elements with the specified `data-testid` attribute. |
32+
| [getByText(text[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytext/) | Returns a locator for elements containing the specified text. |
33+
| [getByTitle(title[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytitle/) | Returns a locator for elements with the specified `title` attribute. |
2734
| [goto(url[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/goto/) | Navigates to the specified `url`. |
2835
| [hover(selector[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/hover/) | Hovers over an element matching `selector`. |
2936
| [innerHTML(selector[, options])](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/innerhtml/) | Returns the `element.innerHTML`. |

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
title: 'getByAltText(altText[, options])'
3+
description: 'Browser module: frame.getByAltText(altText[, options]) method'
4+
---
5+
6+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-spec.md" version="<K6_VERSION>" >}}
7+
8+
## Examples
9+
10+
### Basic alt text matching
11+
12+
Find and click an image by its alt text:
13+
14+
<!-- md-k6:skip -->
15+
16+
```javascript
17+
import { browser } from 'k6/browser';
18+
19+
export const options = {
20+
scenarios: {
21+
ui: {
22+
executor: 'shared-iterations',
23+
options: {
24+
browser: {
25+
type: 'chromium',
26+
},
27+
},
28+
},
29+
},
30+
};
31+
32+
export default async function () {
33+
const page = await browser.newPage();
34+
35+
try {
36+
await page.goto('https://quickpizza.grafana.com');
37+
38+
const logo = page.mainFrame().getByAltText('LOGO');
39+
await logo.waitFor();
40+
41+
await logo.click();
42+
await page.waitForLoadState();
43+
} finally {
44+
await page.close();
45+
}
46+
}
47+
```
48+
49+
### Exact alt text matching
50+
51+
Use exact matching for precise alt text:
52+
53+
<!-- md-k6:skip -->
54+
55+
```javascript
56+
import { browser } from 'k6/browser';
57+
58+
export const options = {
59+
scenarios: {
60+
ui: {
61+
executor: 'shared-iterations',
62+
options: {
63+
browser: {
64+
type: 'chromium',
65+
},
66+
},
67+
},
68+
},
69+
};
70+
71+
export default async function () {
72+
const page = await browser.newPage();
73+
74+
try {
75+
await page.goto('https://quickpizza.grafana.com');
76+
77+
const logo = page.mainFrame().getByAltText('logo', { exact: true });
78+
await logo.waitFor();
79+
80+
await logo.click();
81+
await page.waitForLoadState();
82+
} finally {
83+
await page.close();
84+
}
85+
}
86+
```
87+
88+
### Using regular expressions
89+
90+
Find images using pattern matching:
91+
92+
<!-- md-k6:skip -->
93+
94+
```javascript
95+
import { browser } from 'k6/browser';
96+
97+
export const options = {
98+
scenarios: {
99+
ui: {
100+
executor: 'shared-iterations',
101+
options: {
102+
browser: {
103+
type: 'chromium',
104+
},
105+
},
106+
},
107+
},
108+
};
109+
110+
export default async function () {
111+
const page = await browser.newPage();
112+
113+
try {
114+
await page.goto('https://quickpizza.grafana.com');
115+
116+
const logo = page.mainFrame().getByAltText(/logo/s);
117+
await logo.waitFor();
118+
119+
await logo.click();
120+
await page.waitForLoadState();
121+
} finally {
122+
await page.close();
123+
}
124+
}
125+
```
126+
127+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbyalttext-tips.md" version="<K6_VERSION>" >}}
128+
129+
## Related
130+
131+
- [frame.getByRole()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role
132+
- [frame.getByLabel()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbylabel/) - Locate by form labels
133+
- [frame.getByPlaceholder()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyplaceholder/) - Locate by placeholder text
134+
- [frame.getByTestId()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID
135+
- [frame.getByTitle()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute
136+
- [frame.getByText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytext/) - Locate by visible text

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: 'getByLabel(text[, options])'
3+
description: 'Browser module: frame.getByLabel(text[, options]) method'
4+
---
5+
6+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-spec.md" version="<K6_VERSION>" >}}
7+
8+
## Examples
9+
10+
### Basic form interaction
11+
12+
Fill form fields using their labels:
13+
14+
<!-- md-k6:skip -->
15+
16+
```javascript
17+
import { browser } from 'k6/browser';
18+
19+
export const options = {
20+
scenarios: {
21+
ui: {
22+
executor: 'shared-iterations',
23+
options: {
24+
browser: {
25+
type: 'chromium',
26+
},
27+
},
28+
},
29+
},
30+
};
31+
32+
export default async function () {
33+
const page = await browser.newPage();
34+
35+
try {
36+
await page.setContent(`
37+
<label for="username">Username (hint: default)</label>
38+
<input type="text" id="username" name="username">
39+
<label for="password">Password (hint: 12345678)</label>
40+
<input type="password" id="password" name="password">
41+
`);
42+
43+
const frame = page.mainFrame();
44+
const username = frame.getByLabel('Username (hint: default)', { exact: true });
45+
const password = frame.getByLabel(/^Password.*$/);
46+
47+
await username.fill('default');
48+
await password.fill('12345678');
49+
} finally {
50+
await page.close();
51+
}
52+
}
53+
```
54+
55+
### Working with different input types
56+
57+
Handle various form control types in various label association patterns:
58+
59+
<!-- md-k6:skip -->
60+
61+
```javascript
62+
import { browser } from 'k6/browser';
63+
64+
export const options = {
65+
scenarios: {
66+
browser: {
67+
executor: 'shared-iterations',
68+
options: {
69+
browser: {
70+
type: 'chromium',
71+
},
72+
},
73+
},
74+
},
75+
};
76+
77+
export default async function () {
78+
const page = await browser.newPage();
79+
80+
try {
81+
await page.setContent(`
82+
<label for="username">Username (hint: default)</label>
83+
<input type="text" id="username" name="username">
84+
<span id="password-label">Password (hint: 12345678)</span>
85+
<input type="password" aria-labelledby="password-label">
86+
<label for="subscribe">Subscribe to newsletter</label>
87+
<input type="checkbox" id="subscribe" name="subscribe">
88+
<label for="email">Email</label>
89+
<input type="radio" id="email" value="email">
90+
<label for="sms">Text message</label>
91+
<input type="radio" id="sms" value="sms">
92+
<label for="theme">Theme</label>
93+
<select id="theme" name="theme">
94+
<option value="light">Light</option>
95+
<option value="dark">Dark</option>
96+
<option value="system">System</option>
97+
</select>
98+
<textarea aria-label="Comments"></textarea>
99+
`);
100+
101+
const frame = page.mainFrame();
102+
103+
// Inputs
104+
await frame.getByLabel('Username (hint: default)', { exact: true }).fill('default');
105+
await frame.getByLabel(/^Password.*$/).fill('12345678');
106+
107+
// Checkbox
108+
await frame.getByLabel('Subscribe to newsletter').check();
109+
110+
// Radio button
111+
await frame.getByLabel('Email', { exact: true }).check();
112+
113+
// Select dropdown
114+
await frame.getByLabel('Theme').selectOption('light');
115+
116+
// Textarea
117+
await frame.getByLabel('Comments').fill('This is a test comment');
118+
} finally {
119+
await page.close();
120+
}
121+
}
122+
```
123+
124+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbylabel-tips.md" version="<K6_VERSION>" >}}
125+
126+
## Related
127+
128+
- [frame.getByRole()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role
129+
- [frame.getByAltText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyalttext/) - Locate by alt text
130+
- [frame.getByPlaceholder()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyplaceholder/) - Locate by placeholder text
131+
- [frame.getByTestId()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID
132+
- [frame.getByTitle()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute
133+
- [frame.getByText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytext/) - Locate by text content

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: 'getByPlaceholder(placeholder[, options])'
3+
description: 'Browser module: frame.getByPlaceholder(placeholder[, options]) method'
4+
---
5+
6+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-spec.md" version="<K6_VERSION>" >}}
7+
8+
## Example
9+
10+
Find and fill inputs by their placeholder text:
11+
12+
<!-- md-k6:skip -->
13+
14+
```javascript
15+
import { browser } from 'k6/browser';
16+
17+
export const options = {
18+
scenarios: {
19+
browser: {
20+
executor: 'shared-iterations',
21+
options: {
22+
browser: {
23+
type: 'chromium',
24+
},
25+
},
26+
},
27+
},
28+
};
29+
30+
export default async function () {
31+
const page = await browser.newPage();
32+
33+
try {
34+
await page.setContent(`
35+
<input type="text" placeholder="First name">
36+
<input type="text" placeholder="Last name">
37+
<input type="text" placeholder="dd/mm/yyyy">
38+
<input type="text" placeholder="[email protected]">
39+
<input type="text" placeholder="+1 (555) 123-4567">
40+
`);
41+
42+
const frame = page.mainFrame();
43+
await frame.getByPlaceholder('First name').fill('First');
44+
await frame.getByPlaceholder('Last name').fill('Last');
45+
await frame.getByPlaceholder('dd/mm/yyyy').fill('01/01/1990');
46+
47+
await frame.getByPlaceholder('[email protected]').fill('[email protected]');
48+
await frame.getByPlaceholder('+1 (555) 123-4567').fill('+1 (555) 987-6543');
49+
} finally {
50+
await page.close();
51+
}
52+
}
53+
```
54+
55+
{{< docs/shared source="k6" lookup="browser/getby-apis/getbyplaceholder-tips.md" version="<K6_VERSION>" >}}
56+
57+
## Related
58+
59+
- [frame.getByRole()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyrole/) - Locate by ARIA role
60+
- [frame.getByAltText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbyalttext/) - Locate by alt text
61+
- [frame.getByLabel()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbylabel/) - Locate by form labels (preferred for accessibility)
62+
- [frame.getByTestId()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytestid/) - Locate by test ID
63+
- [frame.getByTitle()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytitle/) - Locate by title attribute
64+
- [frame.getByText()](https://grafana.com/docs/k6/<K6_VERSION>/javascript-api/k6-browser/frame/getbytext/) - Locate by visible text

0 commit comments

Comments
 (0)