How to use toBeFocused method in Playwright Internal

Best JavaScript code snippet using playwright-internal

accessibility_spec.js

Source:accessibility_spec.js Github

copy

Full Screen

...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();...

Full Screen

Full Screen

test-chrome.ts

Source:test-chrome.ts Github

copy

Full Screen

...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);...

Full Screen

Full Screen

accessibility_tools_spec.js

Source:accessibility_tools_spec.js Github

copy

Full Screen

...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 });...

Full Screen

Full Screen

jquery.fat-footer.js

Source:jquery.fat-footer.js Github

copy

Full Screen

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

Full Screen

Full Screen

focus-scope.spec.js

Source:focus-scope.spec.js Github

copy

Full Screen

...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();...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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('

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful