I have a test case that selects publication from list and clicks retweet button on it to trigger modal which is then inserted into DOM and has 2 buttons, Confirm and Cancel.
In headless: false - everything works as expected, modal is displayed and clicked: https://i.stack.imgur.com/XrmA5.png
In headless: true - modal is never opened: https://i.stack.imgur.com/GnpnE.png
Test Code
test('should repost conversation', async () => {
const options = {
showOwnedBtn: 'showOwned-link',
ideaSelector: 'searchbar-idea',
retweetBtn: 'retweet-button',
selectedPublication: 'The looming challenge to South Korea competitiveness',
titleSelector: 'publicationTitle-link',
repostBtn: 'repost-button',
}
await login.user(users.hubert, 'wubs', path);
await navbar.removeFilter(options.showOwnedBtn, path);
await navbar.searchFilter(options.ideaSelector, path, null);
await publication.selectPublicationRetweetByTitle(options.titleSelector, options.selectedPublication, path);
await page.waitForSelector(options.repostBtn)
await modal.confirm(options.repostBtn, path);
await navbar.goto('flow', path);
await screenshot.take(path);
await logout.user(users.hubert, 'wubs', path);
});
Problematic method:
async selectPublicationRetweetByTitle(selector, text, path) {
const retweetSelector = dataAutomation('retweet-button');
const pub = dataAutomation('publication')
const publicationSelector = await page.$$(pub);
let selected = null;
for (const publication of publicationSelector) {
const pubTitleSelector = await publication.$('[data-automation="publicationTitle-link"]');
const pubTitle = await pubTitleSelector.getProperty('innerText');
const titleText = await pubTitle.jsonValue();
if (titleText === text){
selected = await publication.$(retweetSelector);
}
}
await screenshot.take(path);
await selected.click();
await screenshot.take(path);
}