从 TextArea 元素中剥离 HTML 标签以在 testcafe 中执行断言
[英]Stripping HTML tags from TextArea Element to perform assertion in testcafe
问题描述
我有一些格式如下的文本区域字段。 这就像这样被植入到数据库中。
<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 有任何见解？
我已经尝试过 textcontent、innertext、value 与 w/eql 结合使用，包含只是撞到了砖墙。
await t.expect(messagingDetailsPage.emailBodyHTML.textContent).contains(userdata.emailbodyhtml,"Email Body in HTML Match Not Found")
1 个解决方案
解决方案1
2 已采纳 2020-02-07 12:38:45
这不是一项典型的任务，因为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);
});
Angular正在从HTML标签中剥离属性
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.