diff --git a/docs/src/testing-library-js.md b/docs/src/testing-library-js.md
index 20c75b2a05..e2780bbcad 100644
--- a/docs/src/testing-library-js.md
+++ b/docs/src/testing-library-js.md
@@ -27,7 +27,7 @@ If you use DOM Testing Library in the browser (for example, you bundle end-to-en
 | `expect(screen.getByLabelText('Password')).toHaveValue('secret')` | `await expect(component.getByLabelText('Password')).toHaveValue('secret')` |
 | `screen.findByText('...')`                              | `component.getByText('...')`                      |
 | `screen.getByTestId('...')`                             | `component.getByTestId('...')`                    |
-| `screen.queryByPlaceholderText('...')`                  | `component.get('[placeholder="..."]')`            |
+| `screen.queryByPlaceholderText('...')`                  | `component.locator('[placeholder="..."]')`            |
 | `screen.getByRole('button', { pressed: true })`         | `component.getByRole('button', { pressed: true })`|
 
 ## Example
diff --git a/packages/html-reporter/src/headerView.spec.tsx b/packages/html-reporter/src/headerView.spec.tsx
index b37befd22e..363d3aebea 100644
--- a/packages/html-reporter/src/headerView.spec.tsx
+++ b/packages/html-reporter/src/headerView.spec.tsx
@@ -29,11 +29,11 @@ test('should render counters', async ({ mount }) => {
     ok: false,
     duration: 100000
   }} filterText='' setFilterText={() => {}}></HeaderView>);
-  await expect(component.get('a', { hasText: 'All' }).get('.counter')).toHaveText('100');
-  await expect(component.get('a', { hasText: 'Passed' }).get('.counter')).toHaveText('42');
-  await expect(component.get('a', { hasText: 'Failed' }).get('.counter')).toHaveText('31');
-  await expect(component.get('a', { hasText: 'Flaky' }).get('.counter')).toHaveText('17');
-  await expect(component.get('a', { hasText: 'Skipped' }).get('.counter')).toHaveText('10');
+  await expect(component.locator('a', { hasText: 'All' }).locator('.counter')).toHaveText('100');
+  await expect(component.locator('a', { hasText: 'Passed' }).locator('.counter')).toHaveText('42');
+  await expect(component.locator('a', { hasText: 'Failed' }).locator('.counter')).toHaveText('31');
+  await expect(component.locator('a', { hasText: 'Flaky' }).locator('.counter')).toHaveText('17');
+  await expect(component.locator('a', { hasText: 'Skipped' }).locator('.counter')).toHaveText('10');
 });
 
 test('should toggle filters', async ({ page, mount: mount }) => {
@@ -51,14 +51,14 @@ test('should toggle filters', async ({ page, mount: mount }) => {
     filterText=''
     setFilterText={(filterText: string) => filters.push(filterText)}>
   </HeaderView>);
-  await component.get('a', { hasText: 'All' }).click();
-  await component.get('a', { hasText: 'Passed' }).click();
+  await component.locator('a', { hasText: 'All' }).click();
+  await component.locator('a', { hasText: 'Passed' }).click();
   await expect(page).toHaveURL(/#\?q=s:passed/);
-  await component.get('a', { hasText: 'Failed' }).click();
+  await component.locator('a', { hasText: 'Failed' }).click();
   await expect(page).toHaveURL(/#\?q=s:failed/);
-  await component.get('a', { hasText: 'Flaky' }).click();
+  await component.locator('a', { hasText: 'Flaky' }).click();
   await expect(page).toHaveURL(/#\?q=s:flaky/);
-  await component.get('a', { hasText: 'Skipped' }).click();
+  await component.locator('a', { hasText: 'Skipped' }).click();
   await expect(page).toHaveURL(/#\?q=s:skipped/);
   expect(filters).toEqual(['', 's:passed', 's:failed', 's:flaky', 's:skipped']);
 });
diff --git a/packages/html-reporter/src/imageDiffView.spec.tsx b/packages/html-reporter/src/imageDiffView.spec.tsx
index f72b70dc3f..d07e8dd40a 100644
--- a/packages/html-reporter/src/imageDiffView.spec.tsx
+++ b/packages/html-reporter/src/imageDiffView.spec.tsx
@@ -37,7 +37,7 @@ const imageDiff: ImageDiff = {
 
 test('should render links', async ({ mount }) => {
   const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
-  await expect(component.get('a')).toHaveText([
+  await expect(component.locator('a')).toHaveText([
     'screenshot-actual.png',
     'screenshot-expected.png',
     'screenshot-diff.png',
@@ -46,11 +46,11 @@ test('should render links', async ({ mount }) => {
 
 test('should show actual by default', async ({ mount }) => {
   const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
-  const sliderElement = component.get('data-testid=test-result-image-mismatch-grip');
+  const sliderElement = component.locator('data-testid=test-result-image-mismatch-grip');
   await expect.poll(() => sliderElement.evaluate(e => e.style.left), 'Actual slider is on the right').toBe('611px');
 
-  const images = component.get('img');
-  const imageCount = await component.get('img').count();
+  const images = component.locator('img');
+  const imageCount = await component.locator('img').count();
   for (let i = 0; i < imageCount; ++i) {
     const image = images.nth(i);
     const box = await image.boundingBox();
@@ -61,11 +61,11 @@ test('should show actual by default', async ({ mount }) => {
 test('should switch to expected', async ({ mount }) => {
   const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
   await component.getByText('Expected', { exact: true }).click();
-  const sliderElement = component.get('data-testid=test-result-image-mismatch-grip');
+  const sliderElement = component.locator('data-testid=test-result-image-mismatch-grip');
   await expect.poll(() => sliderElement.evaluate(e => e.style.left), 'Expected slider is on the left').toBe('371px');
 
-  const images = component.get('img');
-  const imageCount = await component.get('img').count();
+  const images = component.locator('img');
+  const imageCount = await component.locator('img').count();
   for (let i = 0; i < imageCount; ++i) {
     const image = images.nth(i);
     const box = await image.boundingBox();
@@ -77,7 +77,7 @@ test('should switch to diff', async ({ mount }) => {
   const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
   await component.getByText('Diff', { exact: true }).click();
 
-  const image = component.get('img');
+  const image = component.locator('img');
   const box = await image.boundingBox();
   expect(box).toEqual({ x: 400, y: 80, width: 200, height: 200 });
 });