Can protractor be made to run slowly?

Question

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

Sherilyn

Um, What? Why do you want this? – Gallows

I'd like to run a specific test and watch the interaction take place. Sometimes the error messages are esoteric and simply watching the action take place would allow me to spot the actual issue faster, fix it, and update the error message for later. Thanks! – Sherilyn

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

Gulick

This is just perfect! I'll open ticket with protractor - they should support ability to delay each command out of the box - it's more than helpful when debugging failing test. – Muscatel

I didn't seem to be able to get this work with [email protected] and Jasmine2. Do you know which version this code above worked for? – Alexine

@Filip Sobczak With protractor 3.0 (and Jasmine 2) this doesn't works due to the control flow changes introduced in this new protractor version. Would be easy to change this code to adapt it? – Hone

@Hone interesting, works for me in Protractor 3.3.0. – Shushubert

@Hone I kinda forgot that I wrote this :) but it still seems to work for me, hope you solved it! – Gulick

Unable to use the above solution in arrow only functions. Getting error:- "arguments object cannot be used in a arrow fiction"- Typescript – Hackett

Answer 2

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.

Electoral

Answer 3

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

Jahncke

Ok, thanks... I guess what I'm looking for is something that would add a short sleep to the control flow after each promise completes. – Sherilyn

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

Friseur

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

Erdrich