在 Angular 应用程序中测试事件跟踪答案

【问题标题】：Testing Event tracking in Angular applications在 Angular 应用程序中测试事件跟踪
【发布时间】：2016-12-19 11:42:38
【问题描述】：

TLDR：

我正在寻找

一种通过 e2e（量角器）测试外部脚本在 Angular 应用程序中发出的 Http 请求的方法，无需模拟以获取传递给 http 请求的真实值。
在 Angular 应用程序中进行 e2e 测试事件时，在新创建的选项卡/窗口中停止页面执行的方法

到目前为止，我找不到任何方法来做这些事情，我搜索了很多..我希望我不会重复任何其他问题..但我认为我几乎阅读了所有可能与我相关的问题想要做.. 很抱歉没有打开两个问题，但到目前为止，这都是与跟踪相关的内容，也可以在一个问题中发布；）

所以这是场景：

我有一个跟踪点击和查看的应用程序。他们以“多角度”的原则进行跟踪，我们作为创建者、提供者（等于我们为其执行此操作的客户）和将应用程序实施到他们自己的每个跟踪中的发布者。

除了这种“多角度跟踪”之外，还有不同的跟踪方式我们称之为“多用途跟踪”

跟踪像素
跟踪回调
点击后到达网址

使用跟踪像素进行跟踪

关于这个没什么好说的。每个“角度”都可以提供跟踪像素，这些像素在触发事件时绑定到视图中的 img 标签。单元测试和e2e测试都没有问题

使用回调函数进行跟踪

每个“角度”都可以提供诸如 google-analytics 之类的脚本，这些脚本会在事件触发时执行。单元测试这些都没有问题。当谈到 e2e 测试时，我希望能够做到以下几点：

请求页面
- View Tracker 被初始化
- ga.send 被执行
- 检查发出的 http 请求（这是挣扎的开始）
- 测试请求url中的属性是否ok

经过大量研究后，我找不到一种方法来列出加载和跟踪视图后应用程序发出的 http 请求。有很多方法可以模拟请求，但这不是我需要的。我需要提出真正的请求并进行测试。

点击后到达网址

每个“角度”都可以提供位于最终目标前面的点击 URL。当点击被触发并重定向到应用程序之外时，将使用此 URL 打开一个新窗口/选项卡。与回调一样，单元测试完全没有问题。但是 e2e 部分阻碍了这里。这就是我想做的。

请求页面
- 执行点击
- 切换到新的窗口句柄
- 使浏览器停止执行
- 检查页面网址
- 让浏览器继续
- 测试最终网址

这是我迄今为止尝试过的，但它不起作用：

describe('CTR', function() {
    beforeEach(function() {
        el = element.all(by.repeater('result in ttip.event.result_set.result').row(0));
        el.all(by.css('.hs-tooltip-bet-param')).click();
        browser.ignoreSynchronization = true;
    });
    it('should contain ctr strings', function(done) {
        browser.getAllWindowHandles().then(function(handles) {
            var newWindowHandle = handles[1];
            browser.switchTo().window(newWindowHandle).then(function() {
                browser.driver.executeScript('window.stop()');
                browser.driver.actions().sendKeys(protractor.Key.ENTER).perform();
                // browser.sleep(1000);

                expect(browser.driver.getCurrentUrl()).toContain(config.prefix);
                expect(browser.driver.getCurrentUrl()).toContain('https://ad.doubleclick.net/ddm/');
                expect(browser.driver.getCurrentUrl()).toContain('dc_lat');
                expect(browser.driver.getCurrentUrl()).toContain('dc_rdid');
                expect(browser.driver.getCurrentUrl()).toContain('dc_rdtag_for_child_directed_treatmentid');
            }).then(function() {
                browser.close();
            }).then(function() {
                browser.switchTo().window(handles[0]);
                done();
            });
        });
    });
});

当我在我的机器上运行此测试时，我可以看到 url 从 Clickthrough 变为目标 url。但是测试似乎是在加载最终目标时执行的，这已经很晚了。测试返回最终目标，测试中提到的属性在这里不再可用。

所以这两件事对我来说仍然无法测试，但我需要以任何方式测试它们，因为这些东西正常工作至关重要。你可能会说我不应该担心应用程序之外发生的事情，但出版商和提供者在我的情况下大多没有才华。我需要向他们保证一切都像他们想象的那样工作：D。您也可能会说集成那么多跟踪逻辑没有意义，但我没有决定这样做..

抱歉发了这么长的帖子，感谢您的帮助。

我设法让点击测试适用于特定的点击 URL。似乎这个 Url 需要更长的时间来解决重定向，因此 Protractor 可以在它改变之前抓取 url...但是必须有一种方法来控制它..否则它只是基于时间和运气，并且对于这个目的来说确实不一致：/

【问题讨论】：

标签： javascript angularjs protractor angularjs-e2e event-tracking

【解决方案1】：

对于那些有兴趣的人：我重新考虑了我的方法并最终包含了一个调试模式，该模式禁用所有传出 url 并将它们打印到控制台中。然后可以通过单元和 e2e 测试对其进行测试。

在点击 URL 指向的“重定向”页面上遇到许多问题（发布商禁用了点击 URL，由于 URL 被破坏，活动管理不正确等）后，这似乎是最理智的方式测试一下。

不过，如果发布者提供的网址损坏，我的应用程序将无法正确重定向。但我决定，虽然我想确保重定向正常工作，但这不应该是我应该绞尽脑汁的事情..

【讨论】：