Can protractor be made to run slowly?

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

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);
};

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);

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.

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

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