Should be able to execute the same script with different User Interface (UI) librarys

[sswaroopgupta]

Expected behavior

I should be able to execute a todo app script recorded for reactjs with angularjs

Actual behavior

The script seems hung when executing with angularjs

Steps to replicate

• Run script

const { openBrowser, goto, write, press, click, near, checkBox, closeBrowser } = require('taiko');
(async () => {
    try {
        await openBrowser({headless:false},{timeout:60000});
        await goto("http://todomvc.com/examples/react/#/");
        await write("Working with examples");
        await press("Enter");
        await click("Working with examples");
        await click(checkBox(near("Working with examples")));
        await click("Clear completed");
    } catch (e) {
        console.error(e);
    } finally {
        await closeBrowser();
    }
})();

This works as expected

• Now run the script

const { openBrowser, goto, write, press, click, near, checkBox, closeBrowser } = require('taiko');
(async () => {
    try {
        await openBrowser({headless:false},{timeout:60000});
        await goto("http://todomvc.com/examples/angularjs/#/");
        await write("Working with examples");
        await press("Enter");
        await click("Working with examples");
        await click(checkBox(near("Working with examples")));
        await click("Clear completed");
    } catch (e) {
        console.error(e);
    } finally {
        await closeBrowser();
    }
})();

This script seems hung. It is not able to write on to the field with default focus

Version

commit - 7482e63f741fde16ff9fb9db5267b37dc51931e3

[sswaroopgupta]

The same holds good when the URL http://todomvc.com/examples/typescript-backbone/ is used

[sriv]

I believe taiko does not handle virtual DOMs well. taiko-react is an example where a plugin can bridge this gap.

[zabil]

@sriv According to the issue, the script works on React applications but does not on non virtual dom frameworks like angular and backbone.

[sriv]

ah right. I stand corrected.

[NivedhaSenthil]

The issue was happening in headful mode as the goto action was performed before openBrowser was complete. Fix available in 50bbc07, should work fine for all frameworks.

[Debashis9012]

Verified and tested this issue with the commit version 50bbc07.
The below script is working with different user interface libraries:

const { openBrowser, goto, write, press, click, near, checkBox, closeBrowser } = require('taiko');
(async () => {
    try {
        await openBrowser({headless:false},{timeout:60000});
        //  await goto("http://todomvc.com/examples/angularjs/#/");
        await goto("http://todomvc.com/examples/react/#/");
        await write("Working with examples",into(inputField({placeholder:"What needs to be done?"})));
        await press("Enter");
        await click("Working with examples");
        await click(checkBox(near("Working with examples")));
        await click("Clear completed");
    } catch (e) {
        console.error(e);
    } finally {
        await closeBrowser();
    }
})();