Skip to content

Commit 544f85b

Browse files
committed
feat: add selector tests for various element retrieval methods in FrameTest
1 parent d9c98a6 commit 544f85b

2 files changed

Lines changed: 306 additions & 0 deletions

File tree

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@extends('layouts.app')
2+
3+
@section('content')
4+
<section class="sm:py-24 md:w-full sm:w-2/3 container max-w-5xl py-12 mx-auto">
5+
<h1 class="text-3xl font-bold mb-6">Selector Testing Page</h1>
6+
7+
<!-- Test elements for getByTestId -->
8+
<div class="mb-8">
9+
<h2 class="text-2xl font-bold my-2">Data TestID Elements</h2>
10+
<div data-testid="profile-section" class="p-4 border rounded">
11+
<p>This section has a data-testid attribute</p>
12+
<button data-testid="submit-button" class="bg-white text-black p-2">Submit</button>
13+
</div>
14+
</div>
15+
16+
<!-- Test elements for getByRole -->
17+
<div class="mb-8">
18+
<h2 class="text-2xl font-bold my-2">Role Elements</h2>
19+
<div class="flex space-x-4">
20+
<button role="button" aria-label="Save" class="bg-white text-black p-2">Save</button>
21+
<button role="button" aria-label="Cancel" class="bg-white text-black p-2">Cancel</button>
22+
<input role="checkbox" type="checkbox" id="remember-me" name="remember-me" aria-label="Remember Me" />
23+
<label for="remember-me">Remember Me</label>
24+
<a href="#" role="link" aria-label="Help">Help</a>
25+
</div>
26+
</div>
27+
28+
<!-- Test elements for getByLabel -->
29+
<div class="mb-8">
30+
<h2 class="text-2xl font-bold my-2">Labeled Elements</h2>
31+
<div class="flex flex-col space-y-2">
32+
<div>
33+
<label for="username">Username</label>
34+
<input type="text" id="username" name="username" class="bg-white text-black p-2" value="johndoe" />
35+
</div>
36+
<div>
37+
<label for="password">Password</label>
38+
<input type="password" id="password" name="password" class="bg-white text-black p-2" />
39+
</div>
40+
</div>
41+
</div>
42+
43+
<!-- Test elements for getByPlaceholder -->
44+
<div class="mb-8">
45+
<h2 class="text-2xl font-bold my-2">Placeholder Elements</h2>
46+
<div class="flex flex-col space-y-2">
47+
<input type="text" placeholder="Search..." class="bg-white text-black p-2" />
48+
<textarea placeholder="Enter your comments here" class="bg-white text-black p-2"></textarea>
49+
</div>
50+
</div>
51+
52+
<!-- Test elements for getByText -->
53+
<div class="mb-8">
54+
<h2 class="text-2xl font-bold my-2">Text Elements</h2>
55+
<div class="space-y-2">
56+
<p>This is a simple paragraph</p>
57+
<div>This is a div with text content</div>
58+
<span>This is a special span element</span>
59+
<button class="bg-white text-black p-2">Click Me Button</button>
60+
</div>
61+
</div>
62+
63+
<!-- Test elements for getByAltText -->
64+
<div class="mb-8">
65+
<h2 class="text-2xl font-bold my-2">Alt Text Elements</h2>
66+
<div class="flex space-x-4">
67+
<img src="https://pestphp.com/www/assets/logo.svg" alt="Pest Logo" width="50" height="50" />
68+
<img src="https://pestphp.com/www/assets/logo.svg" alt="Another Image" width="50" height="50" />
69+
</div>
70+
</div>
71+
72+
<!-- Test elements for getByTitle -->
73+
<div class="mb-8">
74+
<h2 class="text-2xl font-bold my-2">Title Attribute Elements</h2>
75+
<div class="flex space-x-4">
76+
<button title="Info Button" class="bg-white text-black p-2">Info</button>
77+
<a href="#" title="Help Link">Help</a>
78+
<div title="Important Information">Hover over me</div>
79+
</div>
80+
</div>
81+
82+
<!-- Mixed test cases with nested elements -->
83+
<div class="mb-8">
84+
<h2 class="text-2xl font-bold my-2">Complex Examples</h2>
85+
<div class="border rounded p-4">
86+
<div data-testid="user-profile">
87+
<h3 class="text-xl font-bold">User Profile</h3>
88+
<div class="flex space-x-4">
89+
<img src="https://pestphp.com/www/assets/logo.svg" alt="Profile Picture" width="50" height="50" />
90+
<div>
91+
<p title="User's Name"><strong>Jane Doe</strong></p>
92+
<p>Email: <span data-testid="user-email">jane.doe@example.com</span></p>
93+
<button role="button" aria-label="Edit Profile" class="bg-white text-black p-1 mt-2">Edit Profile</button>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</section>
100+
@endsection
Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
use Pest\Browser\Playwright\Element;
6+
7+
describe('Frame', function () {
8+
beforeEach(function () {
9+
$this->page = $this->page(playgroundUrl('/test/selector-tests'));
10+
});
11+
12+
describe('getByTestId', function () {
13+
it('finds an element by test ID', function () {
14+
$element = $this->page->getByTestId('profile-section');
15+
16+
expect($element)->toBeInstanceOf(Element::class);
17+
expect($element->isVisible())->toBeTrue();
18+
});
19+
20+
it('finds a nested element by test ID', function () {
21+
$element = $this->page->getByTestId('user-email');
22+
23+
expect($element)->toBeInstanceOf(Element::class);
24+
expect($element->isVisible())->toBeTrue();
25+
});
26+
27+
it('returns null for non-existent test ID', function () {
28+
$element = $this->page->getByTestId('non-existent-id');
29+
30+
expect($element)->toBeNull();
31+
});
32+
});
33+
34+
describe('getByRole', function () {
35+
it('finds an element by role with name option', function () {
36+
$element = $this->page->getByRole('button', ['name' => 'Save']);
37+
38+
expect($element)->toBeInstanceOf(Element::class);
39+
expect($element->isVisible())->toBeTrue();
40+
});
41+
42+
it('finds a checkbox by role with name option', function () {
43+
$element = $this->page->getByRole('checkbox', ['name' => 'Remember Me']);
44+
45+
expect($element)->toBeInstanceOf(Element::class);
46+
});
47+
48+
it('returns null for non-existent role', function () {
49+
$element = $this->page->getByRole('tab', ['name' => 'Non-existent']);
50+
51+
expect($element)->toBeNull();
52+
});
53+
});
54+
55+
describe('getByLabel', function () {
56+
it('finds an input element by its associated label', function () {
57+
$element = $this->page->getByLabel('Username');
58+
59+
expect($element)->toBeInstanceOf(Element::class);
60+
expect($element->getAttribute('value'))->toBe('johndoe');
61+
});
62+
63+
it('finds a password input by its label', function () {
64+
$element = $this->page->getByLabel('Password');
65+
66+
expect($element)->toBeInstanceOf(Element::class);
67+
expect($element->getAttribute('type'))->toBe('password');
68+
});
69+
70+
it('returns null for non-existent label', function () {
71+
$element = $this->page->getByLabel('Non-existent Label');
72+
73+
expect($element)->toBeNull();
74+
});
75+
});
76+
77+
describe('getByPlaceholder', function () {
78+
it('finds an input element by placeholder text', function () {
79+
$element = $this->page->getByPlaceholder('Search...');
80+
81+
expect($element)->toBeInstanceOf(Element::class);
82+
expect($element->getAttribute('type'))->toBe('text');
83+
});
84+
85+
it('finds a textarea by placeholder text', function () {
86+
$element = $this->page->getByPlaceholder('Enter your comments here');
87+
88+
expect($element)->toBeInstanceOf(Element::class);
89+
expect($element->isVisible())->toBeTrue();
90+
});
91+
92+
it('returns null for non-existent placeholder', function () {
93+
$element = $this->page->getByPlaceholder('Non-existent Placeholder');
94+
95+
expect($element)->toBeNull();
96+
});
97+
98+
it('finds an element with exact matching', function () {
99+
$element = $this->page->getByPlaceholder('Search...', true);
100+
101+
expect($element)->toBeInstanceOf(Element::class);
102+
});
103+
});
104+
105+
describe('getByText', function () {
106+
it('finds an element by its text content', function () {
107+
$element = $this->page->getByText('This is a simple paragraph');
108+
109+
expect($element)->toBeInstanceOf(Element::class);
110+
expect($element->isVisible())->toBeTrue();
111+
});
112+
113+
it('finds a button by its text content', function () {
114+
$element = $this->page->getByText('Click Me Button');
115+
116+
expect($element)->toBeInstanceOf(Element::class);
117+
});
118+
119+
it('returns null for non-existent text', function () {
120+
$element = $this->page->getByText('Non-existent Text Content');
121+
122+
expect($element)->toBeNull();
123+
});
124+
125+
it('finds an element with exact matching', function () {
126+
$element = $this->page->getByText('This is a special span element', true);
127+
128+
expect($element)->toBeInstanceOf(Element::class);
129+
});
130+
131+
it('finds partial text without exact matching', function () {
132+
$element = $this->page->getByText('special span');
133+
134+
expect($element)->toBeInstanceOf(Element::class);
135+
});
136+
});
137+
138+
describe('getByAltText', function () {
139+
it('finds an image by its alt text', function () {
140+
$element = $this->page->getByAltText('Pest Logo');
141+
142+
expect($element)->toBeInstanceOf(Element::class);
143+
expect($element->isVisible())->toBeTrue();
144+
});
145+
146+
it('finds another image by its alt text', function () {
147+
$element = $this->page->getByAltText('Another Image');
148+
149+
expect($element)->toBeInstanceOf(Element::class);
150+
});
151+
152+
it('returns null for non-existent alt text', function () {
153+
$element = $this->page->getByAltText('Non-existent Alt Text');
154+
155+
expect($element)->toBeNull();
156+
});
157+
158+
it('finds an element with exact matching', function () {
159+
$element = $this->page->getByAltText('Profile Picture', true);
160+
161+
expect($element)->toBeInstanceOf(Element::class);
162+
});
163+
});
164+
165+
describe('getByTitle', function () {
166+
it('finds an element by its title attribute', function () {
167+
$element = $this->page->getByTitle('Info Button');
168+
169+
expect($element)->toBeInstanceOf(Element::class);
170+
expect($element->isVisible())->toBeTrue();
171+
});
172+
173+
it('finds a link by its title attribute', function () {
174+
$element = $this->page->getByTitle('Help Link');
175+
176+
expect($element)->toBeInstanceOf(Element::class);
177+
});
178+
179+
it('returns null for non-existent title', function () {
180+
$element = $this->page->getByTitle('Non-existent Title');
181+
182+
expect($element)->toBeNull();
183+
});
184+
185+
it('finds an element with exact matching', function () {
186+
$element = $this->page->getByTitle('User\'s Name', true);
187+
188+
expect($element)->toBeInstanceOf(Element::class);
189+
});
190+
});
191+
192+
describe('combining selectors', function () {
193+
it('can find elements using multiple methods in sequence', function () {
194+
// First get the profile section by testId
195+
$profileSection = $this->page->getByTestId('user-profile');
196+
expect($profileSection)->toBeInstanceOf(Element::class);
197+
198+
// Then find a button element with role and aria-label within it
199+
$button = $this->page->getByRole('button', ['name' => 'Edit Profile']);
200+
expect($button)->toBeInstanceOf(Element::class);
201+
202+
// Verify it has the right content
203+
expect($button->isVisible())->toBeTrue();
204+
});
205+
});
206+
});

0 commit comments

Comments
 (0)