如何使用量角器测试 AngularJs，可使用 'bold' 修饰符进行测试，自 webdriver 更新以来已损坏

Question

考虑这个 AngularJs 应用程序

<!DOCTYPE html>
<html>
<head>
<title>
AngularJs insert text after bold checked
</title>
<script src="lib/angular/angular.js"></script>
<script type="text/javascript">
    var app = angular.module('ngTestBoldInsert', []);
    app.controller('ngCtrl', function ($scope) {
        $scope.boldButtonClicked = function () {            
            document.execCommand('bold', false, null);
        };
    });
</script>
</head>
<body>
<div ng-app="ngTestBoldInsert" ng-controller="ngCtrl">
<h2>Edit text after click on checkbox</h2>
<label for="boldButtonId">Bold</label>
<input id="boldButtonId" type="checkbox" ng-change="boldButtonClicked()" ng-model="boldStatus">
<br /><br />
    <div id="textFrame" contenteditable="true" style="padding:10px; border:1px solid black; width:30%; ">text</div>
</div>
    <p>Manual: click on edit frame, input text, Click on 'bold' checkbox. click on edit frame, input some text. Now the text is bold. <br /><br />Please note that this is a simplification, in real application the bold button status is synced with the status of the text but that would make this example very complicated.</p>
</body>
</html>

这个量角器测试：

'use strict';


describe('text editor', function() {


    var textFrame = element(by.id('textFrame'));    
    var boldCheckbox = element(by.id('boldButtonId'));


    it('should insert normal text', function() {
        browser.get('index.html#!/');
        var text = textFrame.getText();
        expect(text).toBe('text');
        textFrame.click();
        textFrame.sendKeys(' plus normal text');
        text = textFrame.getText();
        expect(text).toBe('text plus normal text');

        var html = browser.executeScript("return arguments[0].innerHTML;", textFrame);
        expect(html).toBe('text plus normal text');
    });

    it('should insert bold text', function() {
        boldCheckbox.click();
        textFrame.click();
        textFrame.sendKeys('plus bold text');

        var text = textFrame.getText();
        expect(text).toBe('text plus normal textplus bold text');

        var html = browser.executeScript("return arguments[0].innerHTML;", textFrame);
        expect(html).toBe('text plus normal text<b>plus bold text</b>');
    });

});

此测试一直有效到 chromedriver_76.0.3809.68

并在 chromedriver_77.0.3865.40

中损坏

由 webdriver 更新引起：https://bugs.chromium.org/p/chromedriver/issues/detail?id=2704

文本在测试中不再是粗体。

测试输出：

Expected 'text plus normal textplus bold text' to be 'text plus normal text<b>plus bold text</b>'.

现在如何测试？

Answer 1

首先，尝试element.getAttribute("innerHTML")

如果没有帮助，请执行 element.getAttribute("outterHTML") 它会 return 你一个像 <div id="textFrame" contenteditable="true" style="padding:10px; border:1px solid black; width:30%; ">text plus normal text<b>plus bold text</b></div> 这样的字符串，那么就执行 expect(html).toContain('text plus normal text<b>plus bold text</b>');

在最坏的情况下，如果你不想走这条路，你别无选择，只能向 chromedriver 团队报告一个错误，我建议无论如何都要这样做，因为它是社区驱动的努力

Answer 2

使用 w3c/webdriver 团队提到的操作 https://github.com/w3c/webdriver/issues/1469

操作 api：https://w3c.github.io/webdriver/#actions

而不是 textFrame.click() 和 textFrame.sendKeys 采用代码：

browser.actions().click(textFrame).sendKeys('text plus normal textplus bold text').perform();

如何使用量角器测试 AngularJs，可使用 'bold' 修饰符进行测试，自 webdriver 更新以来已损坏

How to test AngularJs with protractor, contenteditable with 'bold' modifier, broken since webdriver update

webdriver

contenteditable

selenium-chromedriver

angularjs

protractor