Can protractor be made to run slowly? - angularjs

Question

Is there a way to run a Angular E2E test written using protractor slowly so that I can watch what is happening?

Answer 1

Below is my solution to do that. So basically I created a decorator for current control flow execute function, which now additionaly queues a delay of 100ms before each queued action.
This needs to be run before any tests are invoked (outside describe block)
var origFn = browser.driver.controlFlow().execute;
browser.driver.controlFlow().execute = function() {
var args = arguments;
// queue 100ms wait
origFn.call(browser.driver.controlFlow(), function() {
return protractor.promise.delayed(100);
});
return origFn.apply(browser.driver.controlFlow(), args);
};

Answer 2

Just like George Stocker said in the comment, I don't know why you would want to do this...but you can always add a sleep wherever you want in your test.
browser.sleep(6000);

Answer 3

Previous answers look more like workaround. Another way is to add param to Protractor config:
highlightDelay: 1000
And change to:
directConnect: false
It will delay Protractor actions like clicking or typing for 1 second and will highlight in light blue.

Answer 4

You can enter in 'debug mode' by placing in your code the command:
browser.pause();
In the debug mode, you would see the following output in your terminal:
------- WebDriver Debugger -------
ready
press c to continue to the next webdriver command
press d to continue to the next debugger statement
type "repl" to enter interactive mode
type "exit" to break out of interactive mode
press ^C to exit
You could then:
Run command by command by entering c
Continue to the next debugger statement (next browser.pause()) by entering d
Enter in interactive mode where you could interact with all the elements by entering repl

Answer 5

2 ways for doing this
1. First is very childish way, but I'll leave it here
you can highlight the elements you're interacting with!
highlightElement: async ($elementObject, time = 1000) => {
async function setStyle(element, style) {
const previous = await element.getAttribute('style');
await element.setAttribute('style', style);
await setTimeout(() => {
element.setAttribute('style', previous);
}, time);
}
await browser.sleep(time)
return await browser.executeScript(await setStyle, $elementObject.getWebElement(), 'color: red; background-color: yellow; z-index: 9999;');
},
This will highlight the element for a second
And then wrap your actions using this element
let click = async function ($elem) {
await highlightElement($elem);
await $elem.click();
}
let sendKeys = async function ($elem, text) {
await highlightElement($elem);
await $elem.sendKeys(text);
}
And then use it to try some scripts
await sendKeys($login, username);
await sendKeys($password, password);
await click($submit);
This shouldn't really be used in the real script, only when you're playing with it
2. Setup debugging configuration in your code editor
Example for vs code https://medium.com/#ganeshsirsi/how-to-debug-protractor-tests-in-visual-studio-code-e945fc971a74, but the same thing can be achieved in webstorm
This will allow you to execute the code line by line and interact with the variables in the real time. MUST HAVE for everyone who works with protractor. I'm serious