Quelle  mouse.spec.ts

/**
 * @license
 * Copyright 2018 Google Inc.
 * SPDX-License-Identifier: Apache-2.0
 */
import os from 'os';

import expect from 'expect';
import {MouseButton} from 'puppeteer-core/internal/api/Input.js';
import type {Page} from 'puppeteer-core/internal/api/Page.js';
import type {KeyInput} from 'puppeteer-core/internal/common/USKeyboardLayout.js';

import {getTestState, setupTestBrowserHooks} from './mocha-utils.js';

interface ClickData {
  type: string;
  detail: number;
  clientX: number;
  clientY: number;
  isTrusted: boolean;
  button: number;
  buttons: number;
}

interface Dimensions {
  x: number;
  y: number;
  width: number;
  height: number;
}

function dimensions(): Dimensions {
  const rect = document.querySelector('textarea')!.getBoundingClientRect();
  return {
    x: rect.left,
    y: rect.top,
    width: rect.width,
    height: rect.height,
  };
}

describe('Mouse', function () {
  setupTestBrowserHooks();

  it('should click the document', async () => {
    const {page} = await getTestState();

    await page.evaluate(() => {
      (globalThis as any).clickPromise = new Promise(resolve => {
        document.addEventListener('click', event => {
          resolve({
            type: event.type,
            detail: event.detail,
            clientX: event.clientX,
            clientY: event.clientY,
            isTrusted: event.isTrusted,
            button: event.button,
          });
        });
      });
    });
    await page.mouse.click(50, 60);
    const event = await page.evaluate(() => {
      return (globalThis as any).clickPromise;
    });
    expect(event.type).toBe('click');
    expect(event.detail).toBe(1);
    expect(event.clientX).toBe(50);
    expect(event.clientY).toBe(60);
    expect(event.isTrusted).toBe(true);
    expect(event.button).toBe(0);
  });
  it('should resize the textarea', async () => {
    const {page, server} = await getTestState();

    await page.goto(server.PREFIX + '/input/textarea.html');
    const {x, y, width, height} = await page.evaluate(dimensions);
    const mouse = page.mouse;
    await mouse.move(x + width - 4, y + height - 4);
    await mouse.down();
    await mouse.move(x + width + 100, y + height + 100);
    await mouse.up();
    const newDimensions = await page.evaluate(dimensions);
    expect(newDimensions.width).toBe(Math.round(width + 104));
    expect(newDimensions.height).toBe(Math.round(height + 104));
  });
  it('should select the text with mouse', async () => {
    const {page, server} = await getTestState();

    const text =
      "This is the text that we are going to try to select. Let's see how it goes.";

    await page.goto(`${server.PREFIX}/input/textarea.html`);
    await page.focus('textarea');
    await page.keyboard.type(text);
    using handle = await page
      .locator('textarea')
      .filterHandle(async element => {
        return await element.evaluate((element, text) => {
          return element.value === text;
        }, text);
      })
      .waitHandle();
    const {x, y} = await page.evaluate(dimensions);
    await page.mouse.move(x + 2, y + 2);
    await page.mouse.down();
    await page.mouse.move(100, 100);
    await page.mouse.up();
    expect(
      await handle.evaluate(element => {
        return element.value.substring(
          element.selectionStart,
          element.selectionEnd,
        );
      }),
    ).toBe(text);
  });
  it('should trigger hover state', async () => {
    const {page, server} = await getTestState();

    await page.goto(server.PREFIX + '/input/scrollable.html');
    await page.hover('#button-6');
    expect(
      await page.evaluate(() => {
        return document.querySelector('button:hover')!.id;
      }),
    ).toBe('button-6');
    await page.hover('#button-2');
    expect(
      await page.evaluate(() => {
        return document.querySelector('button:hover')!.id;
      }),
    ).toBe('button-2');
    await page.hover('#button-91');
    expect(
      await page.evaluate(() => {
        return document.querySelector('button:hover')!.id;
      }),
    ).toBe('button-91');
  });
  it('should trigger hover state with removed window.Node', async () => {
    const {page, server} = await getTestState();

    await page.goto(server.PREFIX + '/input/scrollable.html');
    await page.evaluate(() => {
      // @ts-expect-error Expected.
      return delete window.Node;
    });
    await page.hover('#button-6');
    expect(
      await page.evaluate(() => {
        return document.querySelector('button:hover')!.id;
      }),
    ).toBe('button-6');
  });
  it('should set modifier keys on click', async () => {
    const {page, server, isFirefox} = await getTestState();

    await page.goto(server.PREFIX + '/input/scrollable.html');
    await page.evaluate(() => {
      return document.querySelector('#button-3')!.addEventListener(
        'mousedown',
        e => {
          return ((globalThis as any).lastEvent = e);
        },
        true,
      );
    });
    const modifiers = new Map<KeyInput, string>([
      ['Shift', 'shiftKey'],
      ['Control', 'ctrlKey'],
      ['Alt', 'altKey'],
      ['Meta', 'metaKey'],
    ]);
    // In Firefox, the Meta modifier only exists on Mac
    if (isFirefox && os.platform() !== 'darwin') {
      modifiers.delete('Meta');
    }
    for (const [modifier, key] of modifiers) {
      await page.keyboard.down(modifier);
      await page.click('#button-3');
      if (
        !(await page.evaluate(mod => {
          return (globalThis as any).lastEvent[mod];
        }, key))
      ) {
        throw new Error(key + ' should be true');
      }
      await page.keyboard.up(modifier);
    }
    await page.click('#button-3');
    for (const [modifier, key] of modifiers) {
      if (
        await page.evaluate(mod => {
          return (globalThis as any).lastEvent[mod];
        }, key)
      ) {
        throw new Error(modifiers.get(modifier) + ' should be false');
      }
    }
  });
  it('should send mouse wheel events', async () => {
    const {page, server} = await getTestState();

    await page.goto(server.PREFIX + '/input/wheel.html');
    using elem = (await page.$('div'))!;
    const boundingBoxBefore = (await elem.boundingBox())!;
    expect(boundingBoxBefore).toMatchObject({
      width: 115,
      height: 115,
    });

    await page.mouse.move(
      boundingBoxBefore.x + boundingBoxBefore.width / 2,
      boundingBoxBefore.y + boundingBoxBefore.height / 2,
    );

    await page.mouse.wheel({deltaY: -100});
    const boundingBoxAfter = await elem.boundingBox();
    expect(boundingBoxAfter).toMatchObject({
      width: 230,
      height: 230,
    });
  });
  it('should set ctrlKey on the wheel event', async () => {
    const {page, server, isFirefox} = await getTestState();
    await page.goto(server.EMPTY_PAGE);
    const ctrlKey = page.evaluate(() => {
      return new Promise(resolve => {
        window.addEventListener(
          'wheel',
          event => {
            resolve(event.ctrlKey);
          },
          {
            once: true,
          },
        );
      });
    });
    await page.keyboard.down('Control');
    await page.mouse.wheel({deltaY: -100});
    // Scroll back to work around
    // https://bugzilla.mozilla.org/show_bug.cgi?id=1901211.
    if (isFirefox) {
      await page.mouse.wheel({deltaY: 100});
    }
    await page.keyboard.up('Control');
    expect(await ctrlKey).toBeTruthy();
  });
  it('should tween mouse movement', async () => {
    const {page} = await getTestState();

    await page.mouse.move(100, 100);
    await page.evaluate(() => {
      (globalThis as any).result = [];
      document.addEventListener('mousemove', event => {
        (globalThis as any).result.push([event.clientX, event.clientY]);
      });
    });
    await page.mouse.move(200, 300, {steps: 5});
    expect(await page.evaluate('result')).toEqual([
      [120, 140],
      [140, 180],
      [160, 220],
      [180, 260],
      [200, 300],
    ]);
  });
  // @see https://crbug.com/929806
  it('should work with mobile viewports and cross process navigations', async () => {
    const {page, server} = await getTestState();

    await page.goto(server.EMPTY_PAGE);
    await page.setViewport({width: 360, height: 640, isMobile: true});
    await page.goto(server.CROSS_PROCESS_PREFIX + '/mobile.html');
    await page.evaluate(() => {
      document.addEventListener('click', event => {
        (globalThis as any).result = {x: event.clientX, y: event.clientY};
      });
    });

    await page.mouse.click(30, 40);

    expect(await page.evaluate('result')).toEqual({x: 30, y: 40});
  });
  it('should not throw if buttons are pressed twice', async () => {
    const {page, server} = await getTestState();

    await page.goto(server.EMPTY_PAGE);

    await page.mouse.down();
    await page.mouse.down();
  });

  interface AddMouseDataListenersOptions {
    includeMove?: boolean;
  }

  const addMouseDataListeners = (
    page: Page,
    options: AddMouseDataListenersOptions = {},
  ) => {
    return page.evaluate(({includeMove}) => {
      const clicks: ClickData[] = [];
      const mouseEventListener = (event: MouseEvent) => {
        clicks.push({
          type: event.type,
          detail: event.detail,
          clientX: event.clientX,
          clientY: event.clientY,
          isTrusted: event.isTrusted,
          button: event.button,
          buttons: event.buttons,
        });
      };
      document.addEventListener('mousedown', mouseEventListener);
      if (includeMove) {
        document.addEventListener('mousemove', mouseEventListener);
      }
      document.addEventListener('mouseup', mouseEventListener);
      document.addEventListener('click', mouseEventListener);
      document.addEventListener('auxclick', mouseEventListener);
      (window as unknown as {clicks: ClickData[]}).clicks = clicks;
    }, options);
  };

  it('should not throw if clicking in parallel', async () => {
    const {page, server} = await getTestState();

    await page.goto(server.EMPTY_PAGE);
    await addMouseDataListeners(page);

    await Promise.all([page.mouse.click(0, 5), page.mouse.click(6, 10)]);

    const data = await page.evaluate(() => {
      return (window as unknown as {clicks: ClickData[]}).clicks;
    });
    const commonAttrs = {
      isTrusted: true,
      detail: 1,
      clientY: 5,
      clientX: 0,
      button: 0,
    };
    expect(data.splice(0, 3)).toMatchObject({
      0: {
        type: 'mousedown',
        buttons: 1,
        ...commonAttrs,
      },
      1: {
        type: 'mouseup',
        buttons: 0,
        ...commonAttrs,
      },
      2: {
        type: 'click',
        buttons: 0,
        ...commonAttrs,
      },
    });
    Object.assign(commonAttrs, {
      clientX: 6,
      clientY: 10,
    });
    expect(data).toMatchObject({
      0: {
        type: 'mousedown',
        buttons: 1,
        ...commonAttrs,
      },
      1: {
        type: 'mouseup',
        buttons: 0,
        ...commonAttrs,
      },
      2: {
        type: 'click',
        buttons: 0,
        ...commonAttrs,
      },
    });
  });

  it('should reset properly', async () => {
    const {page, server, isChrome} = await getTestState();

    await page.goto(server.EMPTY_PAGE);

    await page.mouse.move(5, 5);
    await Promise.all([
      page.mouse.down({button: MouseButton.Left}),
      page.mouse.down({button: MouseButton.Middle}),
      page.mouse.down({button: MouseButton.Right}),
    ]);

    await addMouseDataListeners(page, {includeMove: true});
    await page.mouse.reset();

    const data = await page.evaluate(() => {
      return (window as unknown as {clicks: ClickData[]}).clicks;
    });
    const commonAttrs = {
      isTrusted: true,
      clientY: 5,
      clientX: 5,
    };

    expect(data.slice(0, 2)).toMatchObject([
      {
        ...commonAttrs,
        button: 2,
        buttons: 5,
        detail: 1,
        type: 'mouseup',
      },
      {
        ...commonAttrs,
        button: 2,
        buttons: 5,
        detail: 1,
        type: 'auxclick',
      },
    ]);
    // TODO(crbug/1485040): This should align with the firefox implementation.
    if (isChrome) {
      expect(data.slice(2)).toMatchObject([
        {
          ...commonAttrs,
          button: 1,
          buttons: 1,
          detail: 0,
          type: 'mouseup',
        },
        {
          ...commonAttrs,
          button: 0,
          buttons: 0,
          detail: 0,
          type: 'mouseup',
        },
      ]);
      return;
    }
    expect(data.slice(2)).toMatchObject([
      {
        ...commonAttrs,
        button: 1,
        buttons: 1,
        detail: 1,
        type: 'mouseup',
      },
      {
        ...commonAttrs,
        button: 1,
        buttons: 1,
        detail: 1,
        type: 'auxclick',
      },
      {
        ...commonAttrs,
        button: 0,
        buttons: 0,
        detail: 1,
        type: 'mouseup',
      },
      {
        ...commonAttrs,
        button: 0,
        buttons: 0,
        detail: 1,
        type: 'click',
      },
    ]);
  });

  it('should evaluate before mouse event', async () => {
    const {page, server} = await getTestState();

    await page.goto(server.EMPTY_PAGE);
    await page.goto(server.CROSS_PROCESS_PREFIX + '/input/button.html');

    using button = await page.waitForSelector('button');

    const point = await button!.clickablePoint();

    const result = page.evaluate(() => {
      return new Promise(resolve => {
        document
          .querySelector('button')
          ?.addEventListener('click', resolve, {once: true});
      });
    });
    await page.mouse.click(point?.x, point?.y);
    await result;
  });
});