playwright/test/autowaiting.spec.js

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

const {FFOX, CHROMIUM, WEBKIT} = require('./utils').testOptions(browserType);

describe('Auto waiting', () => {
  it('should await navigation when clicking anchor', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html', async (req, res) => {
      messages.push('route');
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });

    await page.setContent(`<a href="${server.EMPTY_PAGE}">empty.html</a>`);

    await Promise.all([
      page.click('a').then(() => messages.push('click')),
      page.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
    ]);
    expect(messages.join('|')).toBe('route|domcontentloaded|click');
  });
  it('should await cross-process navigation when clicking anchor', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html', async (req, res) => {
      messages.push('route');
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });

    await page.setContent(`<a href="${server.CROSS_PROCESS_PREFIX + '/empty.html'}">empty.html</a>`);

    await Promise.all([
      page.click('a').then(() => messages.push('click')),
      page.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
    ]);
    expect(messages.join('|')).toBe('route|domcontentloaded|click');
  });
  it('should await form-get on click', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html?foo=bar', async (req, res) => {
      messages.push('route');
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });

    await page.setContent(`
      <form action="${server.EMPTY_PAGE}" method="get">
        <input name="foo" value="bar">
        <input type="submit" value="Submit">
      </form>`);

    await Promise.all([
      page.click('input[type=submit]').then(() => messages.push('click')),
      page.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
    ]);
    expect(messages.join('|')).toBe('route|domcontentloaded|click');
  });
  it('should await form-post on click', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html', async (req, res) => {
      messages.push('route');
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });

    await page.setContent(`
      <form action="${server.EMPTY_PAGE}" method="post">
        <input name="foo" value="bar">
        <input type="submit" value="Submit">
      </form>`);

    await Promise.all([
      page.click('input[type=submit]').then(() => messages.push('click')),
      page.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
    ]);
    expect(messages.join('|')).toBe('route|domcontentloaded|click');
  });
  it('should await navigation when assigning location', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html', async (req, res) => {
      messages.push('route');
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });
    await Promise.all([
      page.evaluate(`window.location.href = "${server.EMPTY_PAGE}"`).then(() => messages.push('evaluate')),
      page.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
    ]);
    expect(messages.join('|')).toBe('route|domcontentloaded|evaluate');
  });
  it('should await navigation when assigning location twice', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html?cancel', async (req, res) => { res.end('done'); });
    server.setRoute('/empty.html?override', async (req, res) => { messages.push('routeoverride'); res.end('done'); });
    await Promise.all([
      page.evaluate(`
        window.location.href = "${server.EMPTY_PAGE}?cancel";
        window.location.href = "${server.EMPTY_PAGE}?override";
      `).then(() => messages.push('evaluate')),
    ]);
    expect(messages.join('|')).toBe('routeoverride|evaluate');
  });
  it('should await navigation when evaluating reload', async({page, server}) => {
    const messages = [];
    await page.goto(server.EMPTY_PAGE);
    server.setRoute('/empty.html', async (req, res) => {
      messages.push('route');
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });

    await Promise.all([
      page.evaluate(`window.location.reload()`).then(() => messages.push('evaluate')),
      page.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
    ]);
    expect(messages.join('|')).toBe('route|domcontentloaded|evaluate');
  });
  it('should await navigating specified target', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html', async (req, res) => {
      messages.push('route');
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });

    await page.setContent(`
      <a href="${server.EMPTY_PAGE}" target=target>empty.html</a>
      <iframe name=target></iframe>
    `);
    const frame = page.frame({ name: 'target' });
    await Promise.all([
      page.click('a').then(() => messages.push('click')),
      frame.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
    ]);
    expect(frame.url()).toBe(server.EMPTY_PAGE);
    expect(messages.join('|')).toBe('route|domcontentloaded|click');
  });
  it('should work with waitUntil: nowait', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html', async (req, res) => {
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });

    await page.setContent(`<a href="${server.EMPTY_PAGE}">empty.html</a>`);
    await Promise.all([
      page.click('a', { waitUntil: 'nowait' }).then(() => messages.push('click')),
      page.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
      page.waitForNavigation({ waitUntil: 'load' }).then(() => messages.push('load')),
    ]);
    expect(messages.join('|')).toBe('click|domcontentloaded|load');
  });
  it('should work with waitUntil: load', async({page, server}) => {
    const messages = [];
    server.setRoute('/empty.html', async (req, res) => {
      messages.push('route');
      res.setHeader('Content-Type', 'text/html');
      res.end(`<link rel='stylesheet' href='./one-style.css'>`);
    });

    await page.setContent(`<a href="${server.EMPTY_PAGE}">empty.html</a>`);
    await Promise.all([
      page.click('a', { waitUntil: 'load' }).then(() => messages.push('click')),
      page.waitForNavigation({ waitUntil: 'domcontentloaded' }).then(() => messages.push('domcontentloaded')),
      page.waitForNavigation({ waitUntil: 'load' }).then(() => messages.push('load')),
    ]);
    expect(messages.join('|')).toBe('route|domcontentloaded|load|click');
  });
});

describe('Auto waiting should not hang when', () => {
  it('clicking on links which do not commit navigation', async({page, server, httpsServer}) => {
    await page.goto(server.EMPTY_PAGE);
    await page.setContent(`<a href='${httpsServer.EMPTY_PAGE}'>foobar</a>`);
    await page.click('a');
  });
  it('calling window.stop async', async({page, server, httpsServer}) => {
    server.setRoute('/empty.html', async (req, res) => {});
    await page.evaluate((url) => {
        window.location.href = url;
        setTimeout(() => window.stop(), 100);
      }, server.EMPTY_PAGE);
  });
  it('calling window.stop sync', async({page, server, httpsServer}) => {
    await page.evaluate((url) => {
        window.location.href = url;
        window.stop();
      }, server.EMPTY_PAGE);
  });
  it('assigning location to about:blank', async({page, server}) => {
    await page.goto(server.EMPTY_PAGE);
    await page.evaluate(`window.location.href = "about:blank";`);
  });
  it('assigning location to about:blank after non-about:blank', async({page, server}) => {
    server.setRoute('/empty.html', async (req, res) => {});
    await page.evaluate(`
        window.location.href = "${server.EMPTY_PAGE}";
        window.location.href = "about:blank";`);
  });
  it('calling window.open and window.close', async function({page, server}) {
    await page.goto(server.EMPTY_PAGE);
    await page.evaluate(() => {
      const popup = window.open(window.location.href);
      popup.close();
    });
  });
});