KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use toBeFocused method in Playwright Internal
Best JavaScript code snippet using playwright-internal
accessibility_spec.js
Source:accessibility_spec.js 
...115 // This happens only when coming from notes page116 it('should open focus on viewer on TAB keydown if viewer is opened', function() {117 this.annotator.viewer.load([annotation]);118 highlight.trigger(keyDownEvent(this.KEY.TAB));119 expect(this.annotator.element.find('.annotator-listing')).toBeFocused();120 });121 it('should focus highlighted text after closing', function() {122 var note;123 highlight.trigger(keyDownEvent(this.KEY.ENTER));124 note = this.annotator.element.find('.annotator-edit');125 note.trigger(keyDownEvent(this.KEY.ESCAPE));126 expect(highlight).toBeFocused();127 });128 it('should focus on grabber after being deleted', function() {129 highlight.trigger(keyDownEvent(this.KEY.ENTER));130 this.annotator.publish('annotationDeleted', {});131 expect(this.plugin.focusGrabber).toBeFocused();132 });133 it('should not focus on grabber when the viewer is hidden', function() {134 this.annotator.publish('annotationDeleted', {});135 expect(this.plugin.focusGrabber).not.toBeFocused();136 });137 });138 describe('keydown events on viewer', function() {139 var highlight, annotation, listing, note, edit, del, close;140 beforeEach(function() {141 highlight = $('<span class="annotator-hl" tabindex="0"/>').appendTo(this.annotator.element);142 annotation = {143 id: '01',144 text: 'Test text',145 highlights: [highlight.get(0)]146 };147 highlight.data('annotation', annotation);148 this.annotator.viewer.load([annotation]);149 listing = this.annotator.element.find('.annotator-listing').first();150 note = this.annotator.element.find('.annotator-note').first();151 edit = this.annotator.element.find('.annotator-edit').first();152 del = this.annotator.element.find('.annotator-delete').first();153 close = this.annotator.element.find('.annotator-close').first();154 spyOn(this.annotator.viewer, 'hide').and.callThrough();155 });156 it('should give focus to Note on Listing TAB keydown', function() {157 listing.focus();158 listing.trigger(tabForwardEvent());159 expect(note).toBeFocused();160 });161 it('should give focus to Close on Listing SHIFT + TAB keydown', function() {162 listing.focus();163 listing.trigger(tabBackwardEvent());164 expect(close).toBeFocused();165 });166 it('should cycle forward through Note, Edit, Delete, and Close on TAB keydown', function() {167 note.focus();168 note.trigger(tabForwardEvent());169 expect(edit).toBeFocused();170 edit.trigger(tabForwardEvent());171 expect(del).toBeFocused();172 del.trigger(tabForwardEvent());173 expect(close).toBeFocused();174 close.trigger(tabForwardEvent());175 expect(note).toBeFocused();176 });177 it('should cycle backward through Note, Edit, Delete, and Close on SHIFT + TAB keydown', function() {178 note.focus();179 note.trigger(tabBackwardEvent());180 expect(close).toBeFocused();181 close.trigger(tabBackwardEvent());182 expect(del).toBeFocused();183 del.trigger(tabBackwardEvent());184 expect(edit).toBeFocused();185 edit.trigger(tabBackwardEvent());186 expect(note).toBeFocused();187 });188 it('should hide on ESCAPE keydown', function() {189 var tabControls = [listing, note, edit, del, close];190 _.each(tabControls, function(control) {191 control.focus();192 control.trigger(keyDownEvent(this.KEY.ESCAPE));193 }, this);194 expect(this.annotator.viewer.hide.calls.count()).toBe(5);195 });196 });197 describe('keydown events on editor', function() {198 var highlight, annotation, form, annotatorItems, textArea, tags, save, cancel;199 beforeEach(function() {200 highlight = $('<span class="annotator-hl" tabindex="0"/>').appendTo(this.annotator.element);201 annotation = {202 id: '01',203 text: 'Test text',204 highlights: [highlight.get(0)]205 };206 highlight.data('annotation', annotation);207 this.annotator.editor.show(annotation, {left: 0, top: 0});208 form = this.annotator.element.find('form.annotator-widget');209 annotatorItems = this.annotator.element.find('.annotator-item');210 textArea = annotatorItems.first().children('textarea');211 tags = annotatorItems.first().next().children('input');212 save = this.annotator.element.find('.annotator-save');213 cancel = this.annotator.element.find('.annotator-cancel');214 spyOn(this.annotator.editor, 'submit').and.callThrough();215 spyOn(this.annotator.editor, 'hide').and.callThrough();216 });217 it('should give focus to TextArea on Form TAB keydown', function() {218 form.focus();219 form.trigger(tabForwardEvent());220 expect(textArea).toBeFocused();221 });222 it('should give focus to Cancel on Form SHIFT + TAB keydown', function() {223 form.focus();224 form.trigger(tabBackwardEvent());225 expect(cancel).toBeFocused();226 });227 it('should cycle forward through textarea, tags, save, and cancel on TAB keydown', function() {228 textArea.focus();229 textArea.trigger(tabForwardEvent());230 expect(tags).toBeFocused();231 tags.trigger(tabForwardEvent());232 expect(save).toBeFocused();233 save.trigger(tabForwardEvent());234 expect(cancel).toBeFocused();235 cancel.trigger(tabForwardEvent());236 expect(textArea).toBeFocused();237 });238 it('should cycle back through textarea, tags, save, and cancel on SHIFT + TAB keydown', function() {239 textArea.focus();240 textArea.trigger(tabBackwardEvent());241 expect(cancel).toBeFocused();242 cancel.trigger(tabBackwardEvent());243 expect(save).toBeFocused();244 save.trigger(tabBackwardEvent());245 expect(tags).toBeFocused();246 tags.trigger(tabBackwardEvent());247 expect(textArea).toBeFocused();248 });249 it('should submit if target is Save on ENTER or SPACE keydown', function() {250 save.focus();251 save.trigger(keyDownEvent(this.KEY.ENTER));252 expect(this.annotator.editor.submit).toHaveBeenCalled();253 this.annotator.editor.submit.calls.reset();254 save.focus();255 save.trigger(keyDownEvent(this.KEY.SPACE));256 expect(this.annotator.editor.submit).toHaveBeenCalled();257 });258 it('should submit on META or CONTROL + ENTER keydown', function() {259 textArea.focus();260 textArea.trigger(enterMetaKeyEvent());261 expect(this.annotator.editor.submit).toHaveBeenCalled();...
test-chrome.ts
Source:test-chrome.ts
...25 await page.goto("/examples/menu-dialog-animated");26 await getMenuButton(page).click();27 await expect(getMenu(page)).toBeVisible();28 if (headless) {29 await expect(getMenuButton(page)).toBeFocused();30 }31 await expect(getMenu(page)).toBeFocused();32 await page.keyboard.press("ArrowUp");33 await expect(getMenuItem(page, "Create list")).toBeFocused();34 await page.keyboard.press("Shift+Tab");35 await expect(getMenu(page)).not.toBeFocused();36 await expect(getMenuButton(page)).toBeFocused();37 await page.keyboard.press("Tab");38 await expect(getMenu(page)).toBeFocused();39 await expect(getMenuButton(page)).not.toBeFocused();40 await page.keyboard.press("ArrowDown");41 await expect(getMenuItem(page, "Dismiss popup")).toBeFocused();42});43test("show/hide create list dialog", async ({ page, headless }) => {44 await page.goto("/examples/menu-dialog-animated");45 await getMenuButton(page).press("Enter");46 await expect(getMenuItem(page, "Dismiss popup")).toBeFocused();47 await page.keyboard.type("cr");48 await expect(getMenuItem(page, "Create list")).toBeFocused();49 await page.keyboard.press("Enter");50 if (headless) {51 await expect(getMenuButton(page)).toBeFocused();52 }53 await expect(getMenu(page)).not.toBeVisible();54 await expect(getDialog(page, "Create list")).toBeVisible();55 await expect(getButton(page, "Dismiss popup")).toBeFocused();56 await page.keyboard.press("Enter");57 await expect(getMenuButton(page)).toBeFocused();58 await expect(getDialog(page, "Create list")).not.toBeVisible();59});60test("create list", async ({ page }) => {61 await page.goto("/examples/menu-dialog-animated");62 await getMenuButton(page, 1).click();63 await expect(getMenu(page)).toBeFocused();64 await page.keyboard.press("PageDown");65 await expect(getMenuItem(page, "Create list")).toBeFocused();66 await getMenuItem(page, "Create list").click();67 await getTextbox(page).click();68 await page.keyboard.press("Enter");69 await expect(getError(page)).toBeVisible();70 await page.keyboard.type("F");71 await expect(getError(page)).not.toBeVisible();72 await page.keyboard.type("avorites");73 await page.keyboard.press("Enter");74 await expect(getDialog(page, "Create list")).not.toBeVisible();75 await expect(getMenu(page)).toBeVisible();76 await expect(getMenuItemCheckbox(page, "Favorites")).toBeFocused();77 await expect(getMenuButton(page, 2)).toBeVisible();78 await page.keyboard.press("Enter");79 await expect(getMenuButton(page, 1)).toBeVisible();80});81test("show/hide manage lists dialog", async ({ page, headless }) => {82 await page.goto("/examples/menu-dialog-animated");83 await getMenuButton(page).click();84 await getMenuItem(page, "Create list").click();85 await getButton(page, "Manage lists").click();86 await expect(getDialog(page, "Manage lists")).toBeVisible();87 if (headless) {88 await expect(getButton(page, "Manage lists")).toBeFocused();89 }90 await expect(91 getButton(getDialog(page, "Manage lists"), "Dismiss popup")92 ).toBeFocused();93 await page.keyboard.press("Enter");94 await expect(getButton(page, "Manage lists")).toBeFocused();95});96test("show/hide information dialog", async ({ page, headless }) => {97 await page.goto("/examples/menu-dialog-animated");98 await getMenuButton(page).click();99 await getMenuItem(page, "Create list").click();100 await expect(getButton(page, "Dismiss popup")).toBeFocused();101 await page.keyboard.press("Shift+Tab");102 await page.keyboard.press("Enter");103 if (headless) {104 await expect(getMenuButton(page)).toBeFocused();105 }106 await expect(getDialog(page, "More information")).toBeVisible();107 await expect(108 getButton(getDialog(page, "More information"), "Dismiss popup")109 ).toBeFocused();110 await page.keyboard.press("Enter");111 await expect(getButton(page, "More information")).toBeFocused();112});113test("repeatedly showing/hiding manage lists dialog", async ({ page }) => {114 await page.goto("/examples/menu-dialog-animated");115 await getMenuButton(page).click();116 await getMenuItem(page, "Create list").click();117 await expect(getButton(page, "Dismiss popup")).toBeFocused();118 await page.keyboard.press("Shift+Tab");119 await page.keyboard.press("Shift+Tab");120 await expect(getButton(page, "Manage lists")).toBeFocused();121 await repeat(async () => {122 await page.keyboard.press("Enter");123 await expect(getDialog(page, "Manage lists")).toBeVisible();124 await expect(125 getButton(getDialog(page, "Manage lists"), "Dismiss popup")126 ).toBeFocused();127 await page.keyboard.press("Enter");128 }, 10);129});130test("repeatedly showing/hiding information dialog", async ({ page }) => {131 await page.goto("/examples/menu-dialog-animated");132 await getMenuButton(page).click();133 await getMenuItem(page, "Create list").click();134 await expect(getButton(page, "Dismiss popup")).toBeFocused();135 await page.keyboard.press("Shift+Tab");136 await expect(getButton(page, "More information")).toBeFocused();137 await repeat(async () => {138 await page.keyboard.press("Enter");139 await expect(getDialog(page, "More information")).toBeVisible();140 await expect(141 getButton(getDialog(page, "More information"), "Dismiss popup")142 ).toBeFocused();143 await page.keyboard.press("Enter");144 }, 10);...
accessibility_tools_spec.js
Source:accessibility_tools_spec.js
...33 });34 // for some reason, toBeFocused tests don't pass with js-test-tool35 // (they do when run locally on browsers), so we're skipping them temporarily36 xit("shifts focus to close-modal button", function() {37 expect($("#close-modal")).toBeFocused();38 });39 // for some reason, toBeFocused tests don't pass with js-test-tool40 // (they do when run locally on browsers), so we're skipping them temporarily41 xit("tab on last element in modal returns to the close-modal button", function() {42 $("#submit").focus();43 pressTabOnLastElt($("#close-modal"), $("#submit"));44 expect($("#close-modal")).toBeFocused();45 });46 // for some reason, toBeFocused tests don't pass with js-test-tool47 // (they do when run locally on browsers), so we're skipping them temporarily48 xit("shift-tab on close-modal element in modal returns to the last element in modal", function() {49 $("#close-modal").focus();50 pressShiftTabOnFirstElt($("#close-modal"), $("#submit"));51 expect($("#submit")).toBeFocused();52 });53 it("pressing ESC calls 'click' on close-modal element", function() {54 var clicked = false;55 $("#close-modal").click(function(theEvent){56 clicked = true;57 });58 pressEsc($("#close-modal"));59 expect(clicked).toBe(true);60 });61 describe("When modal is closed", function() {62 beforeEach(function () {63 $("#close-modal").click();64 });65 it("sets main page aria-hidden attr to false", function() {66 expect($("#mainPageId")).toHaveAttr("aria-hidden", "false");67 });68 it("sets modal aria-hidden attr to true", function() {69 expect($("#modalId")).toHaveAttr("aria-hidden", "true");70 });71 // for some reason, toBeFocused tests don't pass with js-test-tool72 // (they do when run locally on browsers), so we're skipping them temporarily73 xit("returns focus to focusedElementBeforeModal", function() {74 expect(focusedElementBeforeModal).toBeFocused();75 });76 });77 });...
jquery.fat-footer.js
Source:jquery.fat-footer.js
1/**2 * This file contains keyboard navigation code for the fat footer.3 * Left and right arrow keys should take you between fat footer sections4 * (.section) and up and down arrows take you up and down the list within 5 * each section.6 * 7 * @requires jquery8 * @requires jquery.aria.js9 * @requires jquery.aria.key-nav.js10 */11/*global DOM_VK_LEFT, DOM_VK_RIGHT */12(function( $, DOM_VK_LEFT, DOM_VK_RIGHT ) { /* start closure */13 'use strict';14 var ffooterKeyHandlers = {},15 /**16 * Handler for left arrow key when pressed within the fat footer.17 * Move focus to the previous section, or if there are no previous sections18 * move to the last section (cyclical).19 */20 fatFooterLeftKeyEvent = function() {21 22 var toBeFocused = $( this ).prev().find( 'a[tabindex=0]' );23 if ( toBeFocused.length === 0 ) {24 toBeFocused = $( this ).siblings( '.section' ).last().find( 'a[tabindex=0]' );25 }26 27 toBeFocused28 .attr( 'tabindex', 0 )29 .focus()30 ;31 },32 33 34 /**35 * Handler for right arrow key when pressed within the fat footer.36 * Move focus to the next section, or if there are no more sections37 * move to the first section (cyclical).38 */39 fatFooterRightKeyEvent = function() {40 41 var toBeFocused = $( this ).next().find( 'a[tabindex=0]' );42 if ( toBeFocused.length === 0 ) {43 toBeFocused = $( this ).siblings( '.section' ).first().find( 'a[tabindex=0]' );44 }45 46 toBeFocused47 .attr( 'tabindex', 0 )48 .focus()49 ;50 };51 52 53 54 // Add ARIA keyboard navigation to fat footer55 ffooterKeyHandlers[ DOM_VK_LEFT ] = fatFooterLeftKeyEvent;56 ffooterKeyHandlers[ DOM_VK_RIGHT ] = fatFooterRightKeyEvent;57 $( '#fat-footer .section' ).managefocus(58 'a', {59 role : 'menu',60 ignoreKeys : [ DOM_VK_LEFT, DOM_VK_RIGHT ],61 keyHandlers : ffooterKeyHandlers62 }63 );64 ...
focus-scope.spec.js
Source:focus-scope.spec.js
...4 let open = page.locator('#open');5 let close = page.locator('#close');6 let scope = page.locator('#scope');7 await page.keyboard.press('Tab');8 await expect(page.locator('[name="outside-first"]')).toBeFocused();9 await open.click();10 await expect(open).not.toBeFocused();11 await page.keyboard.press('Tab');12 await expect(page.locator('[name="scope-first"]')).toBeFocused();13 await page.keyboard.press('Tab');14 await expect(page.locator('[name="scope-second"]')).toBeFocused();15 await page.keyboard.press('Tab');16 await expect(page.locator('[name="scope-third"]')).toBeFocused();17 await page.keyboard.press('Tab');18 await expect(close).toBeFocused();19 await page.keyboard.press('Tab');20 await expect(page.locator('[name="scope-first"]')).toBeFocused();21 await page.keyboard.press('Shift+Tab');22 await expect(close).toBeFocused();23 await page.keyboard.press('Shift+Tab');24 await expect(page.locator('[name="scope-third"]')).toBeFocused();25 await page.locator('[name="scope-first"]').focus();26 await page.keyboard.press('Tab');27 await expect(page.locator('[name="scope-second"]')).toBeFocused();28 await close.click();29 await page.waitForTimeout(50);30 await page.keyboard.press('Tab');31 await expect(page.locator('[name="outside-second"]')).toBeFocused();...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.click('text=Get started');6 await page.click('text=API');7 await page.click('text=Page');8 await page.click('text=Page.click');9 await page.click('text=page.click(selector[, options])');10 await page.click('input[name="search"]');11 await page.fill('i
Using AI Code Generation
1const { test, expect } = require('@playwright/test');2test('test', async ({ page }) => {3 const search = page.locator('#search_input_react');4 expect(await search.isFocused()).toBe(true);5 await page.click('.navbar__inner .navbar__title');6 expect(await search.isFocused()).toBe(false);7});8 7 | expect(await search.isFocused()).toBe(true);9 8 | await page.click('.navbar__inner .navbar__title');10 > 9 | expect(await search.isFocused()).toBe(false);11 10 | });12const { test } = require('@playwright/test');13test('test', async ({ page }) => {14 const search = page.locator('#search_input_react');15 await expect(search).toBeFocused();16 await page.click('.navbar__inner .navbar__title');17 await expect(search).not.toBeFocused();18});
Using AI Code Generation
1const { toMatchImageSnapshot } = require('jest-image-snapshot');2expect.extend({ toMatchImageSnapshot });3test('should take screenshot', async ({ page }) => {4 const image = await page.screenshot();5 expect(image).toMatchImageSnapshot();6});
Using AI Code Generation
1const { test, expect } = require('@playwright/test');2test('My test', async ({ page }) => {3 await page.click('text=Sign in');4 await page.click('text=Sign in');5 const input = page.locator('input[type="email"]');6 const input2 = page.locator('input[type="password"]');7 const button = page.locator('button[type="submit"]');8 await expect(input).toBeFocused();9 await input.fill('
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
