Protractor可以慢速运行吗？

Question

有没有一种方法可以缓慢运行使用Protractor编写的Angular E2E测试，以便我可以观察正在发生的事情？

- cortfr

---

嗯，什么？你为什么想要这个？ - George Stocker

我想运行一个特定的测试并观察交互过程。有时错误信息很难理解，仅观察操作过程就能让我更快地找到实际问题，修复它并更新后续的错误信息。谢谢！ - cortfr

Answer 1

以下是我用来实现这个的解决方案。所以基本上我为当前控制流execute函数创建了一个装饰器，现在在每个排队的操作之前额外排队了100ms的延迟。

这需要在调用任何测试之前运行（在describe块之外）。

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

---

太好了！我会向Protractor提交工单，要求他们在默认情况下支持延迟每个命令的能力——在调试失败的测试时非常有用。 - WTK

我似乎无法使用protractor @ 3.0.0和Jasmine2使其正常工作。您知道上面的代码适用于哪个版本吗？ - f1lt3r

由于新版Protractor（3.0）引入了控制流程变更，因此@Filip Sobczak所述的代码在其中无法运行（与Jasmine 2一起使用）。是否很容易更改这段代码以适应新版本？ - winlinuz

@winlinuz 很有趣，在 Protractor 3.3.0 版本中适用于我。 - alecxe

@winlinuz 我有点忘记我写过这个了 :) 但它对我仍然有效，希望你已经解决了！ - Filip Sobczak

无法在仅限箭头函数的情况下使用上述解决方案。出现错误：-“arguments对象不能在箭头函数中使用”- TypeScript - sathiya

Answer 2

就像George Stocker在评论中所说的那样，我不知道为什么你想要这样做...但是你可以随时在测试中添加一个sleep。

browser.sleep(6000);

- DavidG

---

好的，谢谢...我想我正在寻找的是，在每个 Promise 完成后添加一个短暂的睡眠到控制流程中的东西。 - cortfr

谢谢，运行得非常好！ :) - Edwin Mokami

Answer 3

之前的回答看起来更像是解决办法。另一种方法是在Protractor配置中添加参数：

Previous answers look more like workaround. Another way is to add param to Protractor config:

highlightDelay: 1000

并更改为：

directConnect: false

它会延迟Protractor点击或输入等操作1秒，并以浅蓝色突出显示。

- Justinas Jakavonis

Answer 4

你可以通过在代码中输入以下命令进入“调试模式”：

browser.pause();

在调试模式下，您将在终端中看到以下输出：

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

你可以进行以下操作：

• 通过输入 c 逐个执行命令
• 通过输入 d 继续执行直到下一个调试器语句（下一个 browser.pause()）
• 通过输入 repl 进入交互模式，与所有元素进行交互

- Julio

Answer 5

两种方法来实现这个

1. 第一种方法很幼稚，但我还是会留在这里

你可以突出显示你正在交互的元素！

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

这将使元素高亮一秒钟

然后使用此元素包装您的操作

let click = async function ($elem) {
  await highlightElement($elem);
  await $elem.click();
}

let sendKeys = async function ($elem, text) {
  await highlightElement($elem);
  await $elem.sendKeys(text);
}

然后使用它来尝试一些脚本

await sendKeys($login, username);
await sendKeys($password, password);
await click($submit);

这段代码不应该在真正的脚本中使用，只有在你玩弄它时才可以使用

2. 在你的代码编辑器中设置调试配置

以vs code为例https://medium.com/@ganeshsirsi/how-to-debug-protractor-tests-in-visual-studio-code-e945fc971a74，但在webstorm中也可以实现相同的功能

这将允许您逐行执行代码并实时与变量交互。对于每个使用protractor的人来说，这是必备的。我是认真的

- Sergey Pleshakov