54

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

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
cortfr
  • 1,115
  • 1
  • 10
  • 14
  • Um, What? Why do you want this? – George Stocker Jul 25 '14 at 16:30
  • 14
    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! – cortfr Jul 25 '14 at 16:35

5 Answers5

81

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);
};
Filip Sobczak
  • 1,286
  • 11
  • 11
  • 6
    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. – WTK Jan 15 '15 at 08:05
  • I didn't seem to be able to get this work with protractor@3.0.0 and Jasmine2. Do you know which version this code above worked for? – f1lt3r Jan 19 '16 at 15:50
  • @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? – winlinuz Feb 04 '16 at 20:00
  • @winlinuz interesting, works for me in Protractor 3.3.0. – alecxe Jun 28 '16 at 16:02
  • @winlinuz I kinda forgot that I wrote this :) but it still seems to work for me, hope you solved it! – Filip Sobczak Nov 08 '16 at 12:44
  • Unable to use the above solution in arrow only functions. Getting error:- "arguments object cannot be used in a arrow fiction"- Typescript – sathiya Sep 30 '19 at 07:25
13

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);
Aaron
  • 2,367
  • 3
  • 25
  • 33
DavidG
  • 469
  • 3
  • 12
12

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.

Justinas Jakavonis
  • 8,220
  • 10
  • 69
  • 114
11

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
Eric Francis
  • 23,039
  • 31
  • 88
  • 122
Julio
  • 849
  • 2
  • 10
  • 17
0

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

Sergey Pleshakov
  • 7,964
  • 2
  • 17
  • 40