Question

我们的质量检查团队使用量角器5.4.2在有角度的Web应用程序上进行功能/集成测试。该应用程序的一部分从我们的API接收数据，然后仅使用CSS在其上应用“句子大小写”类以将文本强制转换为所需的大小写：第一个字符为大写字母，所有后续字符均为小写字母-不管输入格式如何。 / p>

这对于在浏览器中显示的应用程序很好用。但是，当我们的测试使用element.getText（）提取元素文本时，返回的字符串完成了“小写”文本转换，但是不是第一个字符的大写字母。

CSS样式：

/* convert something to sentence case */
.sentence-case {
  text-transform: lowercase;
}
.sentence-case::first-letter {
  text-transform: uppercase;
}

示例HTML

<section id="testSect">
  <h2>Test Section</h2>
  <br/>
  <div class='sentence-case'>ABCDEF</div>
  <div class='sentence-case'>aBcDeF</div>
  <div class='sentence-case'>Abcdef</div>
  <div class='sentence-case'>ABCDEF</div>
</section>

量角器测试代码：

describe('sentence-case transform', () => {
it('with GetText', () => {        
    let foo: ElementArrayFinder = element.all(by.css('#testSect div.sentence-case'));
    browser.get('http://localhost:4200/testPage');
    foo.each((bar: ElementFinder) => {
        expect(bar.getText()).toBe('Abcdef');
    })
})
})

测试结果：

  sentence-case transform
  × with GetText
    - Expected 'abcdef' to be 'Abcdef'.
    - Expected 'abcdef' to be 'Abcdef'.
    - Expected 'abcdef' to be 'Abcdef'.
    - Expected 'abcdef' to be 'Abcdef'.

这是量角器对伪选择器的支持上的限制吗？
量角器是否有任何变通方法来获取最终的转换后的文本值？

Answer 1

最近我看到了相同的行为，尽管我们可以解决它，但是您可以使用一些选项。通过使用executeScript向浏览器发送一些javascript命令，您应该能够获取元素出现的文本（在文本转换之后）。

let textDiv = await element(by.css('div[class]')).get(0);
browser.executeScript("return arguments[0].innerText;", textDiv);

outerText也应在这种情况下工作。

如果您真的想获取伪选择器，则也可以运行以下命令。

//returns uppercase
browser.executeScript("return window.getComputedStyle(arguments[0], ':first-letter').getPropertyValue('text-transform');", textDiv);

您可以尝试使用的代码

    let foo = element.all(by.css('#testSect div.sentence-case'));
    foo.each((bar) => {
        browser.executeScript("return arguments[0].innerText;", bar).then(innerText => {
            console.log(innerText)
            expect(innerText).toBe('Abcdef');
        })
    })

量角器的getText（）方法不包括在:: first-letter伪选择器中完成的文本转换

1 个答案: