playwright/tests/emulation-focus.spec.ts

/**
 * Copyright 2018 Google Inc. All rights reserved.
 * Modifications copyright (c) Microsoft Corporation.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { contextTest as it, browserTest, expect } from './config/browserTest';
import { attachFrame } from './config/utils';

it('should think that it is focused by default', async ({ page }) => {
  expect(await page.evaluate('document.hasFocus()')).toBe(true);
});

it('should think that all pages are focused #smoke', async ({ page }) => {
  const page2 = await page.context().newPage();
  expect(await page.evaluate('document.hasFocus()')).toBe(true);
  expect(await page2.evaluate('document.hasFocus()')).toBe(true);
  await page2.close();
});

it('should focus popups by default', async ({ page, server }) => {
  await page.goto(server.EMPTY_PAGE);
  const [popup] = await Promise.all([
    page.waitForEvent('popup'),
    page.evaluate(url => { window.open(url); }, server.EMPTY_PAGE),
  ]);
  expect(await popup.evaluate('document.hasFocus()')).toBe(true);
  expect(await page.evaluate('document.hasFocus()')).toBe(true);
});

it('should provide target for keyboard events', async ({ page, server }) => {
  const page2 = await page.context().newPage();
  await Promise.all([
    page.goto(server.PREFIX + '/input/textarea.html'),
    page2.goto(server.PREFIX + '/input/textarea.html'),
  ]);
  await Promise.all([
    page.focus('input'),
    page2.focus('input'),
  ]);
  const text = 'first';
  const text2 = 'second';
  await Promise.all([
    page.keyboard.type(text),
    page2.keyboard.type(text2),
  ]);
  const results = await Promise.all([
    page.evaluate('result'),
    page2.evaluate('result'),
  ]);
  expect(results).toEqual([text, text2]);
});

it('should not affect mouse event target page', async ({ page, server }) => {
  const page2 = await page.context().newPage();
  function clickCounter() {
    document.onclick = () => window['clickCount']  = (window['clickCount'] || 0) + 1;
  }
  await Promise.all([
    page.evaluate(clickCounter),
    page2.evaluate(clickCounter),
    page.focus('body'),
    page2.focus('body'),
  ]);
  await Promise.all([
    page.mouse.click(1, 1),
    page2.mouse.click(1, 1),
  ]);
  const counters = await Promise.all([
    page.evaluate('window.clickCount'),
    page2.evaluate('window.clickCount'),
  ]);
  expect(counters).toEqual([1,1]);
});

it('should change document.activeElement', async ({ page, server }) => {
  const page2 = await page.context().newPage();
  await Promise.all([
    page.goto(server.PREFIX + '/input/textarea.html'),
    page2.goto(server.PREFIX + '/input/textarea.html'),
  ]);
  await Promise.all([
    page.focus('input'),
    page2.focus('textarea'),
  ]);
  const active = await Promise.all([
    page.evaluate('document.activeElement.tagName'),
    page2.evaluate('document.activeElement.tagName'),
  ]);
  expect(active).toEqual(['INPUT', 'TEXTAREA']);
});

it('should not affect screenshots', async ({ page, server, browserName, headless }) => {
  it.skip(browserName === 'firefox' && !headless, 'Firefox headede produces a different image');

  const page2 = await page.context().newPage();
  await Promise.all([
    page.setViewportSize({ width: 500, height: 500 }),
    page.goto(server.PREFIX + '/grid.html'),
    page2.setViewportSize({ width: 50, height: 50 }),
    page2.goto(server.PREFIX + '/grid.html'),
  ]);
  await Promise.all([
    page.focus('body'),
    page2.focus('body'),
  ]);
  const screenshots = await Promise.all([
    page.screenshot(),
    page2.screenshot(),
  ]);
  expect(screenshots[0]).toMatchSnapshot('screenshot-sanity.png');
  expect(screenshots[1]).toMatchSnapshot('grid-cell-0.png');
});

it('should change focused iframe', async ({ page, server }) => {
  await page.goto(server.EMPTY_PAGE);
  const [frame1, frame2] = await Promise.all([
    attachFrame(page, 'frame1', server.PREFIX + '/input/textarea.html'),
    attachFrame(page, 'frame2', server.PREFIX + '/input/textarea.html'),
  ]);
  function logger() {
    self['_events'] = [];
    const element = document.querySelector('input');
    element.onfocus = element.onblur = e => self['_events'].push(e.type);
  }
  await Promise.all([
    frame1.evaluate(logger),
    frame2.evaluate(logger),
  ]);
  const focused = await Promise.all([
    frame1.evaluate('document.hasFocus()'),
    frame2.evaluate('document.hasFocus()'),
  ]);
  expect(focused).toEqual([false, false]);
  {
    await frame1.focus('input');
    const events = await Promise.all([
      frame1.evaluate('self._events'),
      frame2.evaluate('self._events'),
    ]);
    expect(events).toEqual([['focus'], []]);
    const focused = await Promise.all([
      frame1.evaluate('document.hasFocus()'),
      frame2.evaluate('document.hasFocus()'),
    ]);
    expect(focused).toEqual([true, false]);
  }
  {
    await frame2.focus('input');
    const events = await Promise.all([
      frame1.evaluate('self._events'),
      frame2.evaluate('self._events'),
    ]);
    expect(events).toEqual([['focus', 'blur'], ['focus']]);
    const focused = await Promise.all([
      frame1.evaluate('document.hasFocus()'),
      frame2.evaluate('document.hasFocus()'),
    ]);
    expect(focused).toEqual([false, true]);
  }
});

// @see https://github.com/microsoft/playwright/issues/3476
browserTest('should focus with more than one page/context', async ({ contextFactory }) => {
  const page1 = await (await contextFactory()).newPage();
  const page2 = await (await contextFactory()).newPage();
  await page1.setContent(`<button id="foo" onfocus="window.gotFocus=true">foo</button>`);
  await page2.setContent(`<button id="foo" onfocus="window.gotFocus=true">foo</button>`);
  await page1.focus('#foo');
  await page2.focus('#foo');
  expect(await page1.evaluate(() => !!window['gotFocus'])).toBe(true);
  expect(await page2.evaluate(() => !!window['gotFocus'])).toBe(true);
});