getgauge/taiko

A node.js library for testing modern web applications

Taiko

Docs | API reference

A Node.js library for testing modern web applications

What’s Taiko?

Taiko is a free and open source browser automation tool built by the team behind Gauge from ThoughtWorks. Taiko is a Node.js library with a clear and concise API to automate Chromium based browsers(Chrome, Microsoft Edge, Opera) and Firefox. Tests written in Taiko are highly readable and maintainable.

With Taiko it’s easy to

• Get Started
• Record/Write/Run tests

Taiko’s smart selectors make tests reliable by adapting to changes in the structure of your web application. With Taiko there’s no need for id/css/xpath selectors or adding explicit waits (for XHR requests) in test scripts.

Features

Taiko is built ground up to test modern web applications. Here’s a list of a few unique features that sets it apart from other browser automation tools.

• Easy Installation
• Interactive Recorder
• Smart Selectors
• Handle XHR and dynamic content
• Request/Response stubbing and mocking

Getting Started

Easy Installation

Taiko works on Windows, MacOS and Linux. You only need Node.js installed in your system to start writing Taiko scripts in JavaScript. After you’ve installed Node.js open a terminal application (or powershell in the case of Windows) and install Taiko using npm with the command

$ npm install -g taiko

This installs Taiko and the latest version of Chromium browser. We are all set to do some testing!

Interactive Recorder

Taiko comes with a Recorder that’s a REPL for writing test scripts. You can use Taiko’s JavaScript API to control the browser from the REPL. To launch the REPL type taiko in your favorite terminal application

$ taiko
Version: 0.8.0 (Chromium:76.0.3803.0)
Type .api for help and .exit to quit
>

This launches the Taiko prompt. You can now use Taiko’s API as commands in this prompt. For example, launch a Chromium browser instance using

> openBrowser()

You can now automate this Chromium browser instance with commands, for example, make the browser search google for something.

> goto("google.com/?hl=en")
> write("taiko test automation")
> click("Google Search")

These commands make the browser go to google’s home page, type the text "taiko test automation" and click on the "Google Search" button. You can see the browser performing these actions as you type and press enter for each command.

Taiko’s REPL keeps a history of all successful commands. Once you finish a flow of execution, you can generate a test script using the special command .code

> .code
const { openBrowser, goto, write, click, closeBrowser } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("google.com");
        await write("taiko test automation");
        await click("Google Search");
    } catch (error) {
            console.error(error);
    } finally {
            closeBrowser();
    }
})();

Taiko generates readable and maintainable JavaScript code. Copy and modify this code or save it directly to a file using

> .code googlesearch.js

You can choose to continue automating or finish the recording using

> .exit

To run a Taiko script pass the file as an argument to taiko

$ taiko googlesearch.js
✔ Browser opened
✔ Navigated to url "http://google.com"
✔ Wrote taiko test automation into the focused element.
✔ Clicked element containing text "Google Search"
✔ Browser closed

By default Taiko runs the script in headless mode, that means it does not launch a browser window. This makes it easy to run Taiko in containers (ex. Docker). To view the browser when the script executes use

$ taiko googlesearch.js --observe

Taiko’s REPL also documents all the API’s. To view all available API’s use the special command .api

$ taiko
Version: 0.8.0 (Chromium:76.0.3803.0)
Type .api for help and .exit to quit
> .api
Browser actions
    openBrowser, closeBrowser, client, switchTo, setViewPort, openTab, closeTab
...

To see more details of an API along with examples use

>.api openBrowser

Launches a browser with a tab. The browser will be closed when the parent node.js process is closed.

Example:
    openBrowser()
    openBrowser({ headless: false })
    openBrowser({args:['--window-size=1440,900']})

Smart Selectors

Taiko’s API treats the browser as a black box. With Taiko we can write scripts by looking at a web page and without inspecting it’s source code For example on google.com the command

> click("Google Search")

clicks on any element with the text Google Search (a button on the page at https://google.com). Taiko’s API mimics user interactions with the browser. For example if you want to write into an element that’s currently in focus use

> write("something")

Or if you want to write into a specific text field

> write("something", into(textBox({placeholder: "Username"})))

With Taiko’s API we can avoid using ids/css/xpath selectors to create reliable tests that don’t break with changes in the web page’s structure.

You can also use Taiko’s proximity selectors to visually locate elements. For example

> click(checkBox(near("Username")))

Will click the checkbox that is nearest to any element with the text Username.

Taiko also supports XPath and CSS selectors

> click($("#button_id")) // Using CSS selector
> click($("//input[@name='button_name']")) // XPath selector

Handle XHR and dynamic content

Taiko’s API listens to actions that trigger XHR request or fetch dynamic content and automatically waits for them to complete before moving on to the next action. Taiko implicitly waits for elements to load on the page before performing executing the command. Scripts written in Taiko are free of explicit local or global waits and the flakiness.

Request/Response stubbing and mocking

Setting up test infrastructure and test data is hard. Taiko makes this easy with the intercept API. For example, block requests on a page (like Google Analytics or any other resource)

> intercept("https://www.google-analytics.com/analytics.js");

Or redirect an XHR request on the page to a test instance

> intercept("https://fetchdata.com", "http://fetchtestdata.com")

Or stub an XHR request to return custom data

> intercept("https://fetchdata.com", {"test": data})

Or even modify data sent by XHR requests

> intercept("https://fetchdata.com", (request) => {request.continue({"custom": "data"})})

This simplifies our test setups as we don’t have to set up mock servers, or replace url’s in tests to point to test instances.

Integrating with Gauge

We recommend using Taiko with Gauge. Gauge is a framework for writing readable and reusable acceptance tests. With features like markdown specifications, data driven execution, parallel execution and reporting Gauge makes test maintenance easy. Gauge is easy to install and well integrated with Taiko. With Gauge and Taiko we can write reliable acceptance tests.

Install Gauge using npm and initialize an initialize and sample Taiko project using

$ npm install @getgauge/cli
$ gauge init js

Learn more about Gauge!

Experimental Firefox Support

To launch taiko with firefox:

• Download and install firefox nightly
• Set TAIKO_BROWSER_PATH to firefox nightly's executable.

Example: TAIKO_BROWSER_PATH="/Applications/Firefoxnightly.app/Contents/MacOS/firefox" taiko

Known Issues for now:

• Highlighting element on action is set to false as overlay domain is not supported
• openTab/closeTab does not work as expected since New is not available in firefox yet
• Autofocus on first input field does not happen
• file:// protocol does not emit events
• waitFoNavigation does not wait for network calls and frame loads

Experimental TypeScript Support

When using Gauge together with Taiko with gauge-ts using

$ npm install @getgauge/cli
$ gauge init ts

Documentation

• API

Branding

• Brand Style Guide which includes assets like logos and images.

Inspired by

• Helium
• Puppeteer

Talk to us

• Discussions for questions and help
• Github Issues to report issues

taiko's Issues

After successful action, step times out

Expected behavior
Once the code in the step is successfully executed, it should not timeout.

Actual behavior
After the action is successfully performed the step is timing out.

Steps to replicate

• Project - https://github.com/sguptatw/js-taiko.git
• run spec - PlaceOrder.spec
• Checkout now times out and fails - However the action of clicking on Checkout Now! is successful.

Version

Version: 0.0.9 (HeadlessChrome/64.0.3264.0)

Code of action performed on the focused element should give the selector

Proposed behavior
The .code of actions performed should give the selector used.

Current behavior
It gives only the user specified parameters

Example of proposed behavior

• start taiko
• openBrowser()
• goto("google.com")
• write("something")
• .code
  Now the .code has write("something")
  instead it can give `write("something","selector_used")

Version

taiko - 0.0.9

Should be able to run the example template

Actual behavior
The step Show subtitle "Choose your OS & download" is failing

The Get started page does not contain this link anymore

Steps to replicate

• Create a taiko project gauge init js_taiko
• Run the specifications gauge run specs

Should be a successful run

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Text split across DOM elements not clickable

Actual behavior
Getting element not found

<div...>Taking <span>Custom</span> Screenshots</div>

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a algolia.js file with

const { browser, openBrowser, goto, listItem, click, link } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("https://gauge.org/");
        await click(link("Documentation"),{waitForNavigation:true});
        await focus(inputField("id","search"));
        await write("Custom")
        await click("Taking Custom Screenshots")
        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko algolia.js

Getting the above error. Note the Taking is the text of the outer div and Custom is in a span text

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Parent #29

An action should be performed if it is shown as successful

Actual behavior
The click action is not successful, however it is shown as successful on the command line

The next step fails

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a click.js file with

const { browser, openBrowser, goto, click,below } = require('taiko');
const assert = require("assert");

(async () => {
    try {
        await openBrowser();
        await goto("https://github.com/getgauge/gauge");
        await click(link("cmd"));
        //await click(link("Why Gauge"));
        assert.equal(await title(),"gauge/cmd at master · getgauge/gauge");
        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko click.js

Getting the above error.

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

User should have option to open browser in normal or headless mode

Expected behavior
User should have option to open browser in normal or headless mode

Actual behavior
On Windows, openBrowser(true), openBrowser(false) both are in headless mode.

Steps to replicate

• Check out project
• Use openBrowser(true) or openBrowser(false) both work in the headless mode.

Version

Gauge version: 0.9.5

Plugins
-------
html-report (4.0.2)
js (2.0.3.nightly-2017-11-08)

Should match exact text to click by default

Actual behavior
By default if the text starts with the given text, the element is clicked.

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a exactClick.js file with

const { browser, openBrowser, goto, link, click, listItem } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("http://google.com");
        await click('Gmai')
    } catch (e) {
        console.error(e);
    } finally {
        if(browser())
            closeBrowser();
    }
})();

• run this taiko exactClick.js

The element Gmail is clicked even though the text given was Gmai
The default behavior should be exact match. It should be configurable.

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Should be able to select ComboBox with its id

Actual behavior
It expects the label associated with the comboBox

Error: Invalid arguments passed, only relativeSelectors are accepted
    at handleRelativeSearch (.../taiko/lib/taiko.js:1100:40)
    at get (.../taiko/lib/taiko.js:642:35)

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a comboBox.js file with

const { browser, openBrowser, goto, click,comboBox } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("google.com");
        await click("I'm Feeling Lucky",{waitForNavigation:true});
        await click("About",{waitForNavigation:true});
        await comboBox("id","lang-icon").select("hi");
        await click("Doodles Archive",{waitForNavigation:true});
        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko comboBox.js

Getting the above error.

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

openBrowser() should not lose focus from the terminal

Current behavior.

• Open the REPL
• Type openBrowser()

The browser opens and focuses on the location bar.

Expected behavior

• Focus must remain on the REPL

Introducing clear command for taiko

Currently when writing commands in the taiko command line interface, the .code option includes the whole session with all commands that have been typed in.
This includes possible false positives or failed attempts to perform actions, ergo I would like to see an option (possible .clear), which removes all previous commands, so that only the following commands are recorded - or even better, to be able to select the ones, one want to include

This is an example:

openBrowser()
[PASS] Browser and page initialized
goto('http://some-ip')
[FAIL] Error: net::ERR_CONNECTION_REFUSED, run .trace for more info.
goto('http://some-ip:8181')
[PASS] Navigated to url "http://some-ip:8181/login"
write('admin', 'Benutzer')
[FAIL] Error: Element not found, run .trace for more info.
write('admin', $('#username'))
[PASS] Wrote admin into the custom selector $(#username)
write('xxxx, $('#password'))
[PASS] Wrote xxx into the custom selector $(#password)
// it said PASS, but nothing happened, so I restarted the login
write('admin', $('#username'))
[PASS] Wrote admin into the custom selector $(#username)
write('xxx', $('#pwdText'))
[PASS] Wrote xxx into the custom selector $(#pwdText)
click($('#create'))
[PASS] Clicked custom selector $(#create)

After the last command, when entering code, the whole sequence is printed out

Add a .api command to list all taiko methods and description

Register a command that will list method and documentation of all the available taiko methods.
For e.g.

> .api
openBrowser() - Opens a browser
click("element") - Clicks an element with text  "element"

Figure out a way to render this from the inline documentation.

LSP Shut down method not responding

Expected behavior
Shut down should respond after processing

Actual behavior
Shut down does not respond

Steps to replicate

• Run LSP tests https://github.com/getgauge/gauge-lsp-tests

Version

Gauge version: 0.9.8
Commit Hash: 1c656c4

Plugins
-------
html-report (4.0.4)
js (2.1.1)

Should click visible link elements

Actual behavior
Tries to click a hidden anchor element

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add file visibleLinks.js

const { browser, openBrowser, goto, click, link, listItem, title } = require('taiko');
(async () => {
    try {
        await openBrowser();
        await goto("https://gauge.org/");
        await click("Plugins",{waitForNavigation:true});
        await click(listItem("Reports"));
        await click(link("Read more"),{waitForNavigation:true});
    } catch (e) {
        console.error(e);
    } finally {
        if (browser()) {
            closeBrowser();
        }
    }
})();

• run this taiko visibleLinks.js

Times out - cannot find element

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Should be able to fetch elements with multiple attribute and value pairs

For now we can fetch elements using single attribute and value pair.
Like

button("class","toggle")

now we should be able fetch using multiple attributes,

button({class:"toggle",id:"button_id"})

Provide a REPL for taiko

Package taiko as a command line tool and library.

Modify taiko.js

• Add shebang

#! /usr/bin/env node

• Link it to /usr/bin/taiko after npm -g install taiko

Initialize the REPL using

$ taiko

Implement custom commands for taiko api

#! /usr/bin/env node

const repl = require('repl');

// Just an example. Implement it inside taiko.js
const _ = require('./taiko')

const server = repl.start({
    prompt: '>> '
});

server.defineCommand('openBrowser', {
    help: 'Opens a browser',
    async action() {
        await _.openBrowser({
            headless: false
        });
        this.displayPrompt();
    }
});

server.defineCommand('goto', {
    help: 'Goto a URL',
    async action(url) {
        await _.goto(url);
        this.displayPrompt();
    }
});

server.defineCommand('click', {
    help: 'Goto a URL',
    async action(item) {
        await _.click(item);
        this.displayPrompt();
    }
});

Can be run as

$ taiko
>> .openBrowser
>> .goto http://getgauge.io
>> .click Get Started

Cannot read property 'exactMatch' of undefined

Expected behavior
Should be able to find the element

Steps to replicate

• Create a file exactMatch.js

const { browser, openBrowser, goto, listItem, click, link } = require('taiko');
const assert = require("assert");

(async () => {
    try {
        await openBrowser();
        await goto("https://gauge.org/index.html");
        await click(link("Documentation"),{waitForNavigation:true});
        await click("Write Specifications",{waitForNavigation:true})
        await scrollTo(link("Refactoring"))
        await scrollUp("Example")
        await waitFor(5000);

        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• Run the taiko command
  taiko exactMatch.js

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Running a taiko script created from REPL should run successfully.

Expected behavior

Taiko script created from REPL using .code <filename> should not throw any errors.

Actual behavior

Throws browser not a function error.

Steps to reproduce

1. taiko
2. openBrowser()
3. goto('gauge.org')
4. click('Get Started')
5. closeBrowser()
6. .code code.js
7. .exit
8. taiko code.js

Near by selection for table row elements

Expected behavior
Should be able to select element based on proximity in tables

Actual behavior
Getting element not found

Steps to replicate

• Test with table elements

text("The Ruby Programming Language") works text("$23.75", near(text("The Ruby Programming Language"))) should give the element.

Version

Version: 0.0.9 (HeadlessChrome/64.0.3264.0)

Add an observe mode to slow interactions while running a script

Current behavior

Taiko runs scripts fast and headless making it hard to see what's exactly happening. This forces a tester to add waits in the code.

for e.g.

await click(checkBox('class','toggle',near('to remove')));
await waitFor(5000);
await hover(button('class','destroy'));
await click(button('class','destroy'));
await waitFor(5000);

Expected behavior

Add flag --observe to taiko command line that introduces a three seconds wait between all commands and runs the script in non-headless mode.

For e.g.

$ taiko sample.js --observe

Make the wait time configurable in seconds.

Alternate names for the flag

• --slow-mo
• --watch

REPL must display useful information after executing commands

To debug and understand the result on executing commands with taiko. The REPL must display useful information. For e.g

>> click("Get Started")
Clicked button "Get Started"
>> scrollDown()
Scrolled down 100 pixels

taiko API can return functions that's parsed and displayed by the REPL

Taiko reports "exists is not a function" on a valid element

Expected behavior

the verification should pass and only fail if the element can not be found

Actual behavior

Taiko reports link(...).exists is not a function

Steps to reproduce

1. openBrowser()
2. goto('http://google.de')
3. link('Gmail').exists()

Versions

Gauge: 0.9.7 (Commit Hash: bc9784c)
taiko: 0.0.9
node v8.10.0

Paste `node` and `taiko` versions here.

Pass a taiko script as argument to taiko command

Let the taiko command take a taiko script as input to run.

For e.g.

$ taiko
> openBrowser("google.com")
> write("Gauge testing")
> click("I'm Feeling Lucky")
> .code gaugesearch.js
$ taiko gaugesearch.js // Runs the tests headlessly

.code and the saved file can omit the import declaration

const { openBrowser, ... } = require('taiko');

Not able to interact with elements in new window

Expected behavior

Should be able to interact with elements on new window

Actual behavior

Not able to find elements on new window

Steps to reproduce

1. openBrowser()
2. goto('https://getgauge.io')
3. click(text('1194'))

Versions

Version: 0.0.9 (HeadlessChrome/64.0.3264.0)
Node version:  v8.10.0

Should be able to scroll to a given text location

Actual behavior
Getting No search session with given id found

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a scrollTo.js file with

const { browser, openBrowser, goto, listItem, click, link } = require('taiko');
const assert = require("assert");

(async () => {
    try {
        await openBrowser();
        await goto("https://gauge.org/index.html");
        await click(link("Documentation"),{waitForNavigation:true});
        await click("Write Specifications")
        await scrollTo("Rephrase steps")
        await click("Write Specifications",{waitForNavigation:true})
        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko scrollTo.js

Getting the above error

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Make .api command result less verbose.

Current behavior

The result of the .api command breaks for larger fonts and smaller terminals.

Expected behavior

As taiko's API is self-explanatory, I think we just need to list it as a comma separated value. If more details are required it can be expanded with .api method

For e.g

> .api

closeBrowser, goto, reload, click, doubleClick, rightClick, hover, focus, write, 
upload, press, highlight, scrollTo, scrollRight, scrollLeft, scrollUp, scrollDown,
screenshot, $, image, link, listItem, button, inputField, fileField, textField, comboBox,
checkBox, radioButton, text, contains, toLeftOf, toRightOf, above, below, near, 
alert, prompt, confirm, beforeunload, intervalSecs, timeoutSecs, waitForNavigation, 
to, into, browser, page, selector, relativeSelector,  RelativeSearchElement, ElementWrapper

Run `.api <name>` for more info on a specific function. For Example: `.api click`.
Complete documentation is available at https://getgauge.github.io/taiko/.

Unlike the sample above, The api must be alphebetically ordered.

Should be able to select image with a proximity selector

Actual behavior
Getting the following error

Error: String parameter expected
    at assertType (.../taiko/lib/taiko.js:1110:32)
    at module.exports.image.args (.../taiko/lib/taiko.js:508:5)    at global.(anonymous function) (.../taiko/taiko.js:27:36)
    at .../test/taikoTestCases/img.js:9:21
(node:16347) UnhandledPromiseRejectionWarning: Error: Element not found
    at elements (.../taiko/lib/taiko.js:1028:46)
(node:16347) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function witho
ut a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:16347) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will te
rminate the Node.js process with a non-zero exit code.

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a img.js file with

const { browser, openBrowser, goto, listItem, click, link } = require('taiko');
const assert = require("assert");

(async () => {
    try {
        await openBrowser();
        await goto("https://gauge.org/index.html");
        await click(link("Blog"),{waitForNavigation:true});
        await click(image(above(text('Zabil Maliackal'))))
        await waitFor(5000);

        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko img.js

Getting the above error

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Goto must handle locations with and without the protocol

Current behavior

$ taiko
> goto("getgauge.io")
 ✘ Error: Protocol error (Page.navigate): Cannot navigate to invalid URL undefined, run `.trace` for more info.

Expected

> goto("getgauge.io")
 ✔ Navigated to url "https://getgauge.io/"

Unable to click with text of input with type file

Expected behavior
Should be able to click on html element input by specifying the text

Actual behavior
Getting the error

(node:3052) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Element not found
(node:3052) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to replicate

• In the html use element

        <input type="file" onchange='readText(this)'/>

• This displays element with text 'Choose File'
• In code call API

    click('Choose File')

Version

Gauge version: 0.9.6.nightly-2017-12-04
Commit Hash: 584485d

Plugins
-------
js (2.0.3.nightly-2017-11-30)

Update Puppeteer to 1.0.0

Release Notes: https://github.com/GoogleChrome/puppeteer/releases/tag/v1.0.0

Now, it has XPath support and dialog.type is changed to dialog.type()

Should scrollUp should scroll to the first occurrence of element above

Actual behavior
It is scrolling to the first occurrence of the element on screen

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a scrollUp.js file with

const { browser, openBrowser, goto, listItem, click, link } = require('taiko');
const assert = require("assert");

(async () => {
    try {
        await openBrowser();
        await goto("https://gauge.org/index.html");
        await click(link("Documentation"),{waitForNavigation:true});
        await click("Write Specifications",{waitForNavigation:true})
        await scrollTo(link("Refactoring"))
        await scrollUp("Example")
        await waitFor(5000);

        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko scrollUp.js

There are many Example links on the page above the refactoring link. But scrollUp is taking the screen to the first Example link on the page

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Should be able to select elements close by with near API

Actual behavior
It expects the near field to be the first element after the current element

(node:4816) UnhandledPromiseRejectionWarning: Error: Element not found
    at elements (/Users/sswaroop/work/gauge/others/taiko/lib/taiko.js:968:46)
(node:4816) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4816) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a nearBy.js file with

const { browser, openBrowser, goto, click,comboBox } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("google.com");
        await click("I'm Feeling Lucky",{waitForNavigation:true});
        await click("About",{waitForNavigation:true});
        await comboBox(near(inputField("placeholder","name"))).select("hi");
        await click("Doodles Archive",{waitForNavigation:true});
        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko nearBy.js

Getting the above error.

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

If an element is not found the test hangs

Expected behavior
It should timeout after sometime.

Steps to replicate

• Create a file hangs.js

const { browser, openBrowser, goto, link, click, listItem } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("http://google.com");
        await click('Somethin')
    } catch (e) {
        console.error(e);
    } finally {
        closeBrowser();
    }
})();

• run the test taiko hangs.js

The element is not found and the test hangs

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Intercept AJAX network calls

Add API to implicilty wait for AJAX requests occurring due to a event.
For eg.
click() of an element can trigger a AJAX request, it should be resolved only after the AJAX requests are finished.

click api should waitForNavigation by default

Actual behavior
Getting the following error

Error: Element not found
    at elements (/Users/sswaroop/work/gauge/others/taiko/lib/taiko.js:968:46)
(node:1503) UnhandledPromiseRejectionWarning: TypeError: browser is not a function
    at /Users/sswaroop/work/gauge/others/test/one/some.js:13:13
(node:1503) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:1503) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a one.js file with

const { browser, openBrowser, goto, click } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("google.com");
        await click("I\'m Feeling Lucky");
        await click("About");
        await click("Doodles Archive");
    } catch (e) {
        console.error(e);
    } finally {
        if (browser()) {
            closeBrowser();
        }
    }
})();

• run this taiko one.js

Getting the above error

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Parent #29

Should be able to playback

Expected behavior
The default code generated with openBrowser() should work.

Actual behavior
Getting the following error

(node:40864) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: Browser or page not initialized. Call `openBrowser()` before using this API
(node:40864) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to replicate

• start taiko
• openBrowser()
• .code something
• taiko something.js
  Getting the above error

Provide own browser and page

Please, add methods to provide my own browser and page instances to taiko.
In my case browser created using connect, and page is created by using Page.create from puppeteer.
Such methods can be named setBrowser, setPage, or setup({browser, page})

Below API should work to select an element in a list

Actual behavior
Below works when the element is the immediately next element in the DOM. However when inside a list like

...

Getting the following error

Error: Element not found
    at elements (.../taiko/lib/taiko.js:968:46)

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a insideList.js file with

const { browser, openBrowser, goto, click,below } = require('taiko');
const assert = require("assert");

(async () => {
    try {
        await openBrowser();
        await goto("https://gauge.org/index.html");
        await click(link("Gauge Commands",below(link("Roadmap"))));
        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko insideList.js

Getting the above error.

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Taiko fails while trying to click "Google Search"

To reproduce this

> openBrowser()
 ✔ Browser and page initialized
> goto("http://google.com")
 ✔ Navigated to url "https://www.google.co.in/?gfe_rd=cr&dcr=0&ei=ikIAWpWdMoby8Aeyu5uACw&gws_rd=ssl"
> click("Google Search")
 ✘ Error: Protocol error (DOM.getBoxModel): Could not compute box model. undefined, run `.trace` for more info.
> 

Document and generate API documentation from source code

Use https://github.com/documentationjs/documentation and integrate all build tools necessary to build and publish documentation.

Should be able to click on a button with given class name

Actual behavior
Getting the error

Error: Element not found
    at elements (.../taiko/lib/taiko.js:1028:46)

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a button.js file with

const { browser, openBrowser, goto, link, click, listItem } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("http://todomvc.com/examples/react/#/");

        await write("to remove");

        await press("Enter");        
        await click(checkBox('class','toggle',near('to remove')))
        await hover(checkBox('class','toggle'))

        await click(button('class','destroy'))
        await waitFor(5000);
        await reload("http://todomvc.com/examples/react/#/",{waitForNavigation:true});

        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko button.js

Getting the above error

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Should be able to click a nested checkbox

Actual behavior
Getting the error

TypeError: Cannot read property '0' of undefined
    at Object.check (/Users/sswaroop/work/gauge/others/taiko/lib/taiko.js:689:56)

Steps to replicate

• Create a directory test
  git clone https://github.com/getgauge/taiko.git
• Checkout branch taiko-cri
  git checkout taiko-cri
• install taiko
  npm install -g
• Create a testDirectory
  Add a todo.js file with

const { browser, openBrowser, goto, link, click, listItem } = require('taiko');

(async () => {
    try {
        await openBrowser();
        await goto("http://todomvc.com/examples/react/#/");
        await click(link("Active"));
        await click(link("Completed"));
        await click(link("All"));
        await checkBox('something').check()
        await closeBrowser();
    } catch (e) {
        console.error(e);
    } finally {
    }
})();

• run this taiko todo.js

Getting the above error

Version

Version: 0.0.9 (HeadlessChrome/69.0.3452.0)

Blocks #29

Add method to get the title of the page

Add a method title that returns the title of the current page

> openBrowser()
> goto("getgauge.io")
> title()
"Gauge | Thoughtworks"

Handle special characters in while clicking or selecting

To replicate

$ taiko
> openBrowser()
> goto("http://google.com")
> click("I'm Feeling Lucky")
' ✘ Error: Evaluation failed: DOMException: Failed to execute \'evaluate\' on \'Document\': The string \'//*[contains(text(),\'I\'m Feeling Lucky\')]\' is not a valid XPath expression.\n    at selector (<anonymous>:2:31), run `.trace` for more info.'
> .trace
'Error: Evaluation failed: DOMException: Failed to execute \'evaluate\' on \'Document\': The string \'//*[contains(text(),\'I\'m Feeling Lucky\')]\' is not a valid XPath expression.
    at selector (<anonymous>:2:31)
    at ExecutionContext.evaluateHandle (.node/lib/node_modules/taiko/node_modules/puppeteer/lib/ExecutionContext.js:66:13)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7)'
> 

Expected.

Handle any string on the UI

exists() throws error when used from REPL

Expected behavior

.exists() should give true/false.

Actual behavior

.exists() currently throws .exists is not a function

Steps to reproduce

1.openBrowser()
2.goto("gauge.org")
3.link("Get Started").exists()

Should be able to write on to a masked field

Expected behavior
With the write API the generated code should be able to write to a masked field(example a password field)

Actual behavior
Unable to write to a password field

Steps to replicate
Download activeadmin-demo.war

• java -jar activeadmin-demo.war
• start taiko
• Try the log in feature with password.

Version

Version: 0.0.9 (HeadlessChrome/64.0.3264.0)

write method must type into focused element when used without paramaters

Current behavior

> goto("http://google.com")
 ✔ Navigated to url "https://www.google.co.in/?gfe_rd=cr&dcr=0&ei=yDAAWo3KFOjx8Aew5ZCIBA"
> write("Gauge testing")
' ✘ Error: Cannot read property \'get\' of undefined, run `.trace` for more info.'

Expected behavior.

Write to the focused element.

Generate taiko api calls from the REPL

After implementing #2
Provide an option in the REPL to convert the sequence of REPL commands to taiko compatible API.

For e.g.

$ taiko
>> openBrowser
>> goto http://getgauge.io
>> click Get Started
>> .copy

should copy the following to clipboard

(async => {
 await openBrowser();
 await goto("http://getauge.io");
 await click("Get Started");
})();

Provide version infomation and help info on startup

Change the splash screen to

___________      .__ __             Interactive browser automation.
\__    ___/____  |__|  | ______     
  |    |  \__  \ |  |  |/ /  _ \    Version: 0.0.4 (3458c)
  |    |   / __ \|  |    <  <_> )   Chrome version: 56.0.0
  |____|  (____  /__|__|_ \____/    Type .api for help and .exit to quit
               \/        \/         Documentation available at http://doccumentation.link

This will have version information.

Implement a .version REPL command to display this information whenever required.

Implement the existing API's using chrome remote interface.

List of API's to be implemented using CRI:

Feature Name	Development	Testing
openBrowser
closeBrowser
goto
title
reload
click
doubleClick
rightClick
hover
focus
write
attach
press
highlight
scrollTo
scrollRight
scrollLeft
scrollUp
scrollDown
screenshot
$
image
link
listItem
button
inputField
fileField
textField
comboBox
checkBox
radioButton
text
contains
toLeftOf
toRightOf
above
below
near
alert
prompt
confirm
beforeUnload
intervalSecs
timeoutSecs
waitForNavigation
to
into
waitFor

Feature Request: Add undo command

Description

Undo last command

Reason

Although the browser itself have the undo button, the generated code doesn't sync with that button.

Example usage

• To undo last step/command

.undo

• To undo last 3 step/command

.undo 3