This method successfully worked for me when testing on a sample website. Feel free to adjust and customize it to fit your specific needs.
it('stack', async () => {
await browser.url('https://www.saucedemo.com/');
const parent = await $('.login_credentials_wrap-inner');
const child = await $('.login_password');
await child.waitForEnabled(5000);
console.log(`Child Text: ${await child.getText()}`);
const childSrc = await child.getHTML();
console.log(`Child HTML: ${childSrc}`);
console.log(`Step 0: ${await parent.getHTML()}`);
await browser.execute((p) => {
let chi = p.lastElementChild; // Refer to notes below
return chi.remove();
}, parent);
console.log(`Step 1: ${await parent.getHTML()}`);
await browser.execute((c, k) => c.insertAdjacentHTML('beforeend', k), parent, childSrc); // Refer to notes below
console.log(`Step 2: ${await parent.getHTML()}`);
expect(await $('.login_password').getText()).toContain('Password for all users:');
});
Console Output:
[0-0] Child Text: Password for all users:
[0-0] secret_sauce
[0-0] Child HTML: <div class="login_password"><h4>Password for all users:</h4>secret_sauce</div>
[0-0] Step 0: <div class="login_credentials_wrap-inner"><div id="login_credentials" class="login_credentials"><h4>Accepted usernames are:</h4>standard_user<br>locked_out_user<br>problem_user<br>performance_glitch_user<br></div><div class="login_password"><h4>Password for all users:</h4>secret_sauce</div></div>
[0-0] Step 1: <div class="login_credentials_wrap-inner"><div id="login_credentials" class="login_credentials"><h4>Accepted usernames are:</h4>standard_user<br>locked_out_user<br>problem_user<br>performance_glitch_user<br></div></div>
[0-0] Step 2: <div class="login_credentials_wrap-inner"><div id="login_credentials" class="login_credentials"><h4>Accepted usernames are:</h4>standard_user<br>locked_out_user<br>problem_user<br>performance_glitch_user<br></div><div class="login_password"><h4>Password for all users:</h4>secret_sauce</div></div>
Note: Modify the code based on the element order. Refer to documentation for insertAdjacentHTML here and lastElementChild here.