如何使用 Protractor 测试 mdToast 的渲染文本？

Question

我的同事正在与 Angular Material 一起工作，他以这种方式使用 mdToast：（在 else 语句中）

$scope.login = () => {
    $scope.loading = true;
    authService.login($scope.username, $scope.password, (result) => {
        if (result) {
            if (result === true) {
                $location.path('/');
            } else {
                $mdToast.show($mdToast.simple().textContent($filter('capitalize')($filter('translate')('passwordNotValid'))).position('top right').hideDelay(3000));
                $scope.loading = false;
                $("#input_username_login").focus();
            }
        } else {
            //error callback from server
            $mdToast.show($mdToast.simple().textContent($filter('capitalize')($filter('translate')('passwordNotValid'))).position('top right').hideDelay(3000));
            $scope.loading = false;
            $("#input_username_login").focus();
        }
    });
};

我需要测试结果 toast 的文本，但似乎 Angular Material 的 mdToast 使用 ng-if。我的同事没有任何用于吐司的 HTML 代码（他只是使用上面的控制器来生成它）即使当吐司被触发时，下一个代码也会在 DOM 中出现几秒钟：

screenshot of the generated md-toast

除其他外，我尝试过使用 browser.wait、waitForAngular 等方法来减缓吐司的消失，但没有奏效。我坚持：

it("should show error toast in English when user fails login", function(){        
    login.email_address_field.sendKeys('random_user@correo.com');
    login.password_field.sendKeys('hardest_pass_123');
    login.login_button.click();
    expect(element(by.tagName('md-toast')).element(by.tagName('span')).getText()).toBe('Incorrect username and/or password');
});

Answer 1

您可以使用 ExpectedConditions 让您的脚本等到烤面包机消息 displayed.Once 显示烤面包机，然后您也可以验证消息。

var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element(by.tagName('md-toast'))),5000);
expect(element(by.tagName('md-toast')).element(by.tagName('span')).getText()).toEqual('Incorrect username and/or password');

Answer 2

我以为例找到了解决方案。我的规格是：

it("should show error toast in English when user fails login", function(){        
    login.email_address_field.sendKeys('random_user@correo.com');
    login.password_field.sendKeys('hardest_pass_123');
    login.login_button.click();
    browser.ignoreSynchronization = true; 
    browser.sleep(1000);
    expect(element(by.tagName('md-toast')).element(by.tagName('span')).getText()).toBe('Incorrect username and/or password');
    browser.ignoreSynchronization = false;
});

Answer 3

这个规范对我有用，它不使用睡眠。这里要注意的重要一点是，必须在浏览器等待时设置 browser.ignoreSynchronization 标志。由于 browser.wait 的异步性质，更改 ignoreSynchronization 必须在 browser.wait promise 解析后完成，否则它可能无效。

// a close button that appears on the md-toast template
const closeToastButton = $('[data-automation="toast-close"]')
const cond = protractor.ExpectedConditions
function waitToastShow() {
    return browser.wait(cond.elementToBeClickable(closeToastButton), 5000)
}
function waitToastHide() {
    return browser.wait(cond.invisibilityOf(closeToastButton), 5000)
}

screenshot = name => browser.takeScreenshot().then(/* save fn */)

describe('a suite ... ', () => {
    it('takes screenshots of an md-toast once shown and after hidden', function () {
        // ... actions that launch an md-toast using $mdToast.show({ ... })
        browser.ignoreSynchronization = true
        waitToastShow().then(() => {
            screenshot('toast-showing.png')
            waitToastHide().then(() => {
                screenshot('toast-hidden.png')
                browser.ignoreSynchronization = false;
            })
        })
    });
}

如何使用 Protractor 测试 mdToast 的渲染文本？

How to test the rendered text of a mdToast with Protractor?

javascript

protractor

angular-material

e2e-testing