I have a few text area fields that are formatted like this. This is seeded into the DB like so.
<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>
Has anyone got any insights into how I can assert this textarea without all the tags and just the text?
I have tried textcontent, innertext, value in conjunction w/eql, contains just hit a brick wall.
await t.expect(messagingDetailsPage.emailBodyHTML.textContent).contains(userdata.emailbodyhtml,"Email Body in HTML Match Not Found")
This is not a typical task, since the textarea element does not support the innerText property as expected.
You can use a workaround though. Create a div element and set its innerHTML property from 'textarea.value'.
See the example:
<!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>
test
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);
});