Skip to content
This repository was archived by the owner on Oct 3, 2024. It is now read-only.

Common scripting mistakes

Jump to bottom
botten-ct edited this page Dec 20, 2018 · 2 revisions

Some syntax or operations are less obvious and lead to common mistakes. This page is intended to keep you from making those mistakes. Feel free to open a pull request or send us a message if you think one is missing.

Using the wrong Transaction ID and Title

// Wrong
await transaction('01_Login', async t => { /*...*/ });
await transaction('02_SearchSomething', async t => { /*...*/ });

Number prefixes were often used to sort transaction in external GUI's. It becomes an issue when a new transaction has to be added in between as this requires renaming all successive transactions

// Wrong
await transaction('01_Login', async t => { /*...*/ });
await transaction('02_ClickOnSearchButton', async t => { /*...*/ });
await transaction('03_SearchSomething', async t => { /*...*/ });

External systems which use the ID as primary key will now display 4 transactions in their GUI:

  • 01_Login
  • 02_ClickOnSearchButton
  • 02_SearchSomething
  • 03_SearchSomething

As the title is a free field defined for display only, this is were numbering could happen. No data will be lost and no double transactions will be created.

// Correct
await transaction('Login', async t => {
    t.title = '01 Login'
});
await transaction('SearchSomething', async t => {
    t.title = '02 Search Something'
});

Using the wrong variant for execution: tab.run(), tab.wait() or tab.waitForNewPage()

With tab.run() we can execute a script on a page and wait until the script has finished.

const elementText = await tab.run(async () => {
    const someElement = await wait.selector('p#foo');
    return someElement.textContent;
});
console.log('Resultaat is', elementText)

Unfortunately this fails when the page is reloaded of redirected to another page. In those cases the script will be aborted and generate an error message:

// Wrong!
// This script causes an error message:
// "The web page has navigated away while the execution of the content script was pending"
await tab.run(async () => {
    const simpleLink = await wait.selector('a[href]');
    simpleLink.click();
    await wait.selector('.bla-bla');
});

This script can be improved by using tab.waitForNewPage(). This variant on tab.run() executes a script assuming the tab will visite a new page.

await tab.waitForNewPage(async () => {
    const simpleLink = await wait.selector('a[href]');
    simpleLink.click();
});
// At this moment, the browser tab has visited a new page.
await tab.run(async () => {
    await wait.selector('.bla-bla');
});

In other cases the script might fail is after a redirect (HTTP redirects don't have this issue, only client side redirects are affected).

Assume we visit the following page:

<!-- example.html -->
<html>
<head>
    <meta http-equiv="refresh" content="5; url=otherPage.html">
</head>
<body id="example">
    Hello world!
</body>
</html>

The script will cause the same error message:

// Wrong
await tab.navigate('http://localhost/example.html');
await tab.run(async () => {
    await wait.selector('body#otherPage');
});

To solve this issue, use tab.wait(). This variant on tab.run() executes a script also after a redirect until it succeeds.

// Correct
await tab.navigate('http://localhost/example.html');
await tab.wait(async () => {
    await wait.selector('body#otherPage');
});

tl;dr

  1. If you have to wait for something to happen, use tab.wait()
  2. If an action has to be executed (mouse click, keyboard stroke), use tab.run()
  3. If an action has to be executed in which the page will be reloaded, use tab.waitForNewPage()
  4. If you have to check for something (assertions), use tab.run()

In the future we will release a new version of Openrunner which should prevent such confusion.

Creating screenshots inside a transaction

Screenshots are an expensive operation. Create them outside transactions.

// Wrong
await transaction('SearchPage', async t => {
    await tab.navigate('https://hn.algolia.com/', {timeout: '10s'});
    await tab.wait(async () => {
        await wait.documentInteractive()
    });
    await screenshot.take();
});

// Correct
await transaction('SearchPage', async t => {
    await tab.navigate('https://hn.algolia.com/', {timeout: '10s'});
    await tab.wait(async () => {
        await wait.documentInteractive()
    });
});
await screenshot.take();
Clone this wiki locally