Reactjs 在react应用程序中以无头模式运行时，木偶演员测试失败

我有一个木偶师测试，当木偶师设置了

headless:false

时运行良好，但当设置了

headless:true

时失败

测试步骤如下：

让用户登录

将它们带到设置页面

打开一个模态文件

在输入元素中键入电子邮件

检查页面上的“下一步”按钮是否已禁用（电子邮件格式不正确） 测试通常运行到应该找到“下一步”按钮的位置。在这一点上，它似乎失去了对页面的关注，因为它挂起等待下一个按钮。我认为类型部分会导致react重新渲染，然后会丢失对模态的关注

以下是测试代码：

beforeAll(async () => {
  await sleep(5000)
  // browser = await puppeteer.launch(getPuppeteerConfig())
  browser_handler = new BrowserHandler
  await wait_for_browser(browser_handler)

  const context = await browser_handler.browser.createIncognitoBrowserContext()
  page = await context.newPage()

  await page.goto(getGoToPage())
  await page.goto(`${getGoToPage()}/login`)
  console.log('Got to login page')
  await login_customer_email_verified(page)
}, 150000)

afterEach( async() => {
  await page.goto(`${getGoToPage()}/dashboard`)
}, TIMEOUT.SECONDS_7)

//TODO: remove skip after fixing issue of test fails when headless set as 'false'
describe('Test email validation', () => {
  test(
    'Should fail email validation for: johndomain.com',
    async () => {
        await page.waitForNavigation()
        await page.goto(`${getGoToPage()}/settings`)
        console.log('Got to settings page')

        await page.waitForSelector('[data-testid="add_new_email_button"]')
        console.log('Found add_new_email_input button')

        await page.click('[data-testid="add_new_email_button"]')

        await page.waitForSelector('[data-testid="manage_emails_modal"]')
        console.log('Found modal')

        await page.waitForSelector('[data-testid="add_new_email_input"]')
        console.log('Found add_new_email_input')

        await page.type('[data-testid="add_new_email_input"]', 'johndomain.com')
        console.log('Type successful')

        await page.waitForSelector('[data-testid="add_email_next_button"]')
        console.log('Found add_email_next_button')

        await page.click('[data-testid=add_email_next_button]') //blur input
        await sleep(TIMEOUT.SECONDS_1)
        await page.click('[data-testid=add_email_next_button]')

        await page.waitForSelector('[data-testid="add_new_email_input_error_text"]')
        const error_message = await page.$eval(
          '[data-testid="add_new_email_input_error_text"]',
          text => text.innerHTML
        )
        expect(error_message).not.toEqual('')
    },
    TIMEOUT.MINUTES_2
  )
})

运行时控制台输出

headless:false

运行时控制台输出

headless:true

这是木偶演员配置：

export function getPuppeteerConfig(width = 1720, height = 980) {
  let args = [
    '--no-sandbox',
    '--disable-background-timer-throttling',
    '--disable-backgrounding-occluded-windows',
    '--disable-renderer-backgrounding'
  ]
  if (!!width && !!height) {
    args.push(`--window-size=${width},${height}`)
  }
  return {
    args: args,
    //devtools: true,
    headless: true,
    //slowMo: 25,
    defaultViewport: null,
    pipe: true
  }
}

有谁能提供一些建议，解释为什么木偶演员在表演过程中会失去焦点？我能帮你修一下吗