从 TextArea 元素中剥离 HTML 标签以在 testcafe 中执行断言

Question

我有几个格式如下的文本区域字段。这是像这样播种到数据库中的。

<table style="line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;width: 100%;border-collapse: collapse;border-collapse: collapse;border-collapse: collapse;border-collapse: collapse;border-collapse: collapse;border-collapse: collapse;">
    <tbody>
<tr style="width: 100%;">
        <td style="padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;" valign="top">
            <p>Hello <strong>[[Contact First Name]]</strong>!</p>
            <p>Your unsubscription request to the following [[Tenant Name]] program has been declined:</p>
            <ul><li>[[Program Name]]</li></ul>
            <p>Thank you,</p>
            <p>[[Tenant Name]]</p>
        </td>
    </tr>
</tbody>
</table>

有没有人对我如何在没有所有标签而只有文本的情况下断言此文本区域有任何见解？

我试过textcontent,innertext,value结合使用w/eql，contains只是碰壁了。

await t.expect(messagingDetailsPage.emailBodyHTML.textContent).contains(userdata.emailbodyhtml,"Email Body in HTML Match Not Found")

Answer 1

这不是典型的任务，因为 textarea 元素不支持预期的 innerText 属性。不过，您可以使用解决方法。创建一个 div 元素并从 'textarea.value' 设置其 innerHTML 属性。看例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<textarea>
<table style="line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 
100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;line-height: 1.6em;margin:0;margin-bottom:15px;border:none;background:none;font-size: 1em;width: 100%;width: 100%;border-collapse: collapse;border-collapse: collapse;border-collapse: collapse;border-collapse: collapse;border-collapse: collapse;border-collapse: collapse;">
    <tbody>
    <tr style="width: 100%;">
        <td style="padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;padding:5px;border:1px solid #ddd;vertical-align: top;"
            valign="top">
            <p>Hello <strong>[[Contact First Name]]</strong>!</p>
            <p>Your unsubscription request to the following [[Tenant Name]] program has been declined:</p>
            <ul><li>[[Program Name]]</li></ul>
            <p>Thank you,</p>
            <p>[[Tenant Name]]</p>
        </td>
    </tr>
    </tbody>
</table>
    </textarea>
</body>
</html>

测试

import { Selector, ClientFunction } from 'testcafe';

fixture `fixture`
    .page `...`;

const getTextAreaText = ClientFunction(() => {
    var textarea = document.querySelector('textarea');
    var div      = document.createElement('div');

    div.innerHTML = textarea.value;

    return div.innerText;
});

test('test', async t => {
    const text = await getTextAreaText();

    console.log(text);
});

从 TextArea 元素中剥离 HTML 标签以在 testcafe 中执行断言

Stripping HTML tags from TextArea Element to perform assertion in testcafe

javascript

automation

automated-tests

e2e-testing

testcafe