puppeteer/test/elementhandle.spec.js

/**
 * Copyright 2018 Google Inc. All rights reserved.
 *
 * 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.
 */

const expect = require('expect');
const {getTestState, setupTestBrowserHooks, setupTestPageAndContextHooks} = require('./mocha-utils');

const utils = require('./utils');

describe('ElementHandle specs', function() {
  setupTestBrowserHooks();
  setupTestPageAndContextHooks();

  describeFailsFirefox('ElementHandle.boundingBox', function() {
    it('should work', async() => {
      const {page, server} = getTestState();

      await page.setViewport({width: 500, height: 500});
      await page.goto(server.PREFIX + '/grid.html');
      const elementHandle = await page.$('.box:nth-of-type(13)');
      const box = await elementHandle.boundingBox();
      expect(box).toEqual({x: 100, y: 50, width: 50, height: 50});
    });
    it('should handle nested frames', async() => {
      const {page, server, isChrome} = getTestState();

      await page.setViewport({width: 500, height: 500});
      await page.goto(server.PREFIX + '/frames/nested-frames.html');
      const nestedFrame = page.frames()[1].childFrames()[1];
      const elementHandle = await nestedFrame.$('div');
      const box = await elementHandle.boundingBox();
      if (isChrome)
        expect(box).toEqual({x: 28, y: 260, width: 264, height: 18});
      else
        expect(box).toEqual({x: 28, y: 182, width: 254, height: 18});
    });
    it('should return null for invisible elements', async() => {
      const {page} = getTestState();

      await page.setContent('<div style="display:none">hi</div>');
      const element = await page.$('div');
      expect(await element.boundingBox()).toBe(null);
    });
    it('should force a layout', async() => {
      const {page} = getTestState();

      await page.setViewport({width: 500, height: 500});
      await page.setContent('<div style="width: 100px; height: 100px">hello</div>');
      const elementHandle = await page.$('div');
      await page.evaluate(element => element.style.height = '200px', elementHandle);
      const box = await elementHandle.boundingBox();
      expect(box).toEqual({x: 8, y: 8, width: 100, height: 200});
    });
    it('should work with SVG nodes', async() => {
      const {page} = getTestState();

      await page.setContent(`
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
          <rect id="theRect" x="30" y="50" width="200" height="300"></rect>
        </svg>
      `);
      const element = await page.$('#therect');
      const pptrBoundingBox = await element.boundingBox();
      const webBoundingBox = await page.evaluate(e => {
        const rect = e.getBoundingClientRect();
        return {x: rect.x, y: rect.y, width: rect.width, height: rect.height};
      }, element);
      expect(pptrBoundingBox).toEqual(webBoundingBox);
    });
  });

  describeFailsFirefox('ElementHandle.boxModel', function() {
    it('should work', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/resetcss.html');

      // Step 1: Add Frame and position it absolutely.
      await utils.attachFrame(page, 'frame1', server.PREFIX + '/resetcss.html');
      await page.evaluate(() => {
        const frame = document.querySelector('#frame1');
        frame.style = `
          position: absolute;
          left: 1px;
          top: 2px;
        `;
      });

      // Step 2: Add div and position it absolutely inside frame.
      const frame = page.frames()[1];
      const divHandle = (await frame.evaluateHandle(() => {
        const div = document.createElement('div');
        document.body.appendChild(div);
        div.style = `
          box-sizing: border-box;
          position: absolute;
          border-left: 1px solid black;
          padding-left: 2px;
          margin-left: 3px;
          left: 4px;
          top: 5px;
          width: 6px;
          height: 7px;
        `;
        return div;
      })).asElement();

      // Step 3: query div's boxModel and assert box values.
      const box = await divHandle.boxModel();
      expect(box.width).toBe(6);
      expect(box.height).toBe(7);
      expect(box.margin[0]).toEqual({
        x: 1 + 4, // frame.left + div.left
        y: 2 + 5,
      });
      expect(box.border[0]).toEqual({
        x: 1 + 4 + 3, // frame.left + div.left + div.margin-left
        y: 2 + 5,
      });
      expect(box.padding[0]).toEqual({
        x: 1 + 4 + 3 + 1, // frame.left + div.left + div.marginLeft + div.borderLeft
        y: 2 + 5,
      });
      expect(box.content[0]).toEqual({
        x: 1 + 4 + 3 + 1 + 2, // frame.left + div.left + div.marginLeft + div.borderLeft + dif.paddingLeft
        y: 2 + 5,
      });
    });

    it('should return null for invisible elements', async() => {
      const {page} = getTestState();

      await page.setContent('<div style="display:none">hi</div>');
      const element = await page.$('div');
      expect(await element.boxModel()).toBe(null);
    });
  });

  describe('ElementHandle.contentFrame', function() {
    itFailsFirefox('should work', async() => {
      const {page,server} = getTestState();

      await page.goto(server.EMPTY_PAGE);
      await utils.attachFrame(page, 'frame1', server.EMPTY_PAGE);
      const elementHandle = await page.$('#frame1');
      const frame = await elementHandle.contentFrame();
      expect(frame).toBe(page.frames()[1]);
    });
  });

  describe('ElementHandle.click', function() {
    it('should work', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/input/button.html');
      const button = await page.$('button');
      await button.click();
      expect(await page.evaluate(() => result)).toBe('Clicked');
    });
    it('should work for Shadow DOM v1', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/shadow.html');
      const buttonHandle = await page.evaluateHandle(() => button);
      await buttonHandle.click();
      expect(await page.evaluate(() => clicked)).toBe(true);
    });
    it('should work for TextNodes', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/input/button.html');
      const buttonTextNode = await page.evaluateHandle(() => document.querySelector('button').firstChild);
      let error = null;
      await buttonTextNode.click().catch(error_ => error = error_);
      expect(error.message).toBe('Node is not of type HTMLElement');
    });
    it('should throw for detached nodes', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/input/button.html');
      const button = await page.$('button');
      await page.evaluate(button => button.remove(), button);
      let error = null;
      await button.click().catch(error_ => error = error_);
      expect(error.message).toBe('Node is detached from document');
    });
    it('should throw for hidden nodes', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/input/button.html');
      const button = await page.$('button');
      await page.evaluate(button => button.style.display = 'none', button);
      const error = await button.click().catch(error_ => error_);
      expect(error.message).toBe('Node is either not visible or not an HTMLElement');
    });
    it('should throw for recursively hidden nodes', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/input/button.html');
      const button = await page.$('button');
      await page.evaluate(button => button.parentElement.style.display = 'none', button);
      const error = await button.click().catch(error_ => error_);
      expect(error.message).toBe('Node is either not visible or not an HTMLElement');
    });
    itFailsFirefox('should throw for <br> elements', async() => {
      const {page} = getTestState();

      await page.setContent('hello<br>goodbye');
      const br = await page.$('br');
      const error = await br.click().catch(error_ => error_);
      expect(error.message).toBe('Node is either not visible or not an HTMLElement');
    });
  });

  describe('ElementHandle.hover', function() {
    itFailsFirefox('should work', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/input/scrollable.html');
      const button = await page.$('#button-6');
      await button.hover();
      expect(await page.evaluate(() => document.querySelector('button:hover').id)).toBe('button-6');
    });
  });

  describe('ElementHandle.isIntersectingViewport', function() {
    it('should work', async() => {
      const {page, server} = getTestState();

      await page.goto(server.PREFIX + '/offscreenbuttons.html');
      for (let i = 0; i < 11; ++i) {
        const button = await page.$('#btn' + i);
        // All but last button are visible.
        const visible = i < 10;
        expect(await button.isIntersectingViewport()).toBe(visible);
      }
    });
  });

  describe('Custom queries', function() {
    this.afterEach(() => {
      const {puppeteer} = getTestState();
      puppeteer.__experimental_clearQueryHandlers();
    });
    it('should register and unregister', async() => {
      const {page, puppeteer} = getTestState();
      await page.setContent('<div id="not-foo"></div><div id="foo"></div>');

      // Register.
      puppeteer.__experimental_registerCustomQueryHandler('getById', (element, selector) => document.querySelector(`[id="${selector}"]`));
      const element = await page.$('getById/foo');
      expect(await page.evaluate(element => element.id, element)).toBe('foo');

      // Unregister.
      puppeteer.__experimental_unregisterCustomQueryHandler('getById');
      try {
        await page.$('getById/foo');
        expect.fail('Custom query handler not set - throw expected');
      } catch (error) {
        expect(error).toStrictEqual(new Error('Query set to use "getById", but no query handler of that name was found'));
      }
    });
    it('should throw with invalid query names', () => {
      try {
        const {puppeteer} = getTestState();
        puppeteer.__experimental_registerCustomQueryHandler('1/2/3', (element, selector) => {});
        expect.fail('Custom query handler name was invalid - throw expected');
      } catch (error) {
        expect(error).toStrictEqual(new Error('Custom query handler names may only contain [a-zA-Z]'));
      }
    });
    it('should work for multiple elements', async() => {
      const {page, puppeteer} = getTestState();
      await page.setContent('<div id="not-foo"></div><div class="foo">Foo1</div><div class="foo baz">Foo2</div>');
      puppeteer.__experimental_registerCustomQueryHandler('getByClass', (element, selector) => document.querySelectorAll(`.${selector}`));
      const elements = await page.$$('getByClass/foo');
      const classNames = await Promise.all(elements.map(async element => await page.evaluate(element => element.className, element)));

      expect(classNames).toStrictEqual(['foo', 'foo baz']);
    });
    it('should eval correctly', async() => {
      const {page, puppeteer} = getTestState();
      await page.setContent('<div id="not-foo"></div><div class="foo">Foo1</div><div class="foo baz">Foo2</div>');
      puppeteer.__experimental_registerCustomQueryHandler('getByClass', (element, selector) => document.querySelectorAll(`.${selector}`));
      const elements = await page.$$eval('getByClass/foo', divs => divs.length);

      expect(elements).toBe(2);
    });
    it('should wait correctly with waitForSelector', async() => {
      const {page, puppeteer} = getTestState();
      puppeteer.__experimental_registerCustomQueryHandler('getByClass', (element, selector) => element.querySelector(`.${selector}`));
      const waitFor = page.waitForSelector('getByClass/foo');

      // Set the page content after the waitFor has been started.
      await page.setContent('<div id="not-foo"></div><div class="foo">Foo1</div>');
      const element = await waitFor;

      expect(element).toBeDefined();
    });
    it('should wait correctly with waitFor', async() => {
      const {page, puppeteer} = getTestState();
      puppeteer.__experimental_registerCustomQueryHandler('getByClass', (element, selector) => element.querySelector(`.${selector}`));
      const waitFor = page.waitFor('getByClass/foo');

      // Set the page content after the waitFor has been started.
      await page.setContent('<div id="not-foo"></div><div class="foo">Foo1</div>');
      const element = await waitFor;

      expect(element).toBeDefined();
    });
  });
});