如何从带有用户旅程的玩笑如测试转变为使用装置的 @playwright/test？

问题描述

我个人认为 playwright 是一种进入系统/端到端测试方向的工具。因此，我使用 playwright + jest 来构建用户旅程并将其集成到 CI/CD 流程中。

由于 playwright 创建了自己的测试运行器，具有拍摄视频和跟踪故障等有用功能，因此从 jest 切换到 @playwright/test 是有意义的。在他们的主页上，playwright 建议使用 test fixtures，所以我绝对希望将它们包含在 switch 中。

下面我将以亚马逊为例。

使用 playwright + jest，我做的第一件事是为环境的通用设置创建一个函数：

function setupSuite({ browserOptions,userConfig }){
  // create playwright browser and use browserOptions as overrides
  // create page from browser
  // register self-implemented trace and screenshot reporters to page
  // go to baseUrl of current environment (e.g. local,branch etc..)
  // click on cookie banner,since it's blocking the UI
  // create a user based on userConfig (e.g. user has amazon prime user? payment options? etc.)
  // return { browser,page,user,... }
}

当然还有一个再次清理一切的函数：

function teardownSuite(suite){
  // close browser
  // delete user
  // etc..
}

然后我会为每个用户旅程使用一个文件。在亚马逊的情况下，用户旅程可能是订单的成功处理：

describe("Successful Order",() => {
  let suite

  beforeAll(async () => {
    const userConfig = { isPrime: false,paymentOptions: [ "paypal","visa" ] }
    suite = await setupbrowser({ userConfig })
    
    // I actually extracted that logic in a function to be able to use it in other tests too,// but just want to make clear whats happening here
    const { page,user } = suite
    await page.fill(".login-username-input",user.username)
    await page.fill(".login-password-input",user.password)
    await page.click(".login-submit-button")
  })

  afterall(() => teardownSuite(suite))

  test("search for toothbrush with suggestions",async () => {
     const { page } = suite
     await page.fill(".search-input","tooth")
     await page.click("text='toothbrush")
     // hit enter
     // do some assertions to check if the search was really successful
  })
  
  test("click on first item and add to chart",async () => {
     // page actions and assertions
  })

  test("go back,click on second item and add to chart",async () => {
     // page actions and assertions
  })

  test("go to chart and pay",async () => {
     // page actions and assertions
  })

  test("check order confirmation mail",async () => {
     // page actions and assertions
  })
})

如您所见，我将我的测试分成了逻辑部分，以使其更具可读性，并查看失败的步骤（test 块）。

将其迁移到 @playwright/test + fixtures 的最佳方法是什么？

您将如何迁移 setupSuite / teardownSuite ？是的，您可以使用夹具，但 setupSuite 需要像 userConfig 这样的参数。是否可以使用参数化装置？
您将如何使用夹具构建测试？例如，如果您想模拟完整的用户旅程，测试将变得越来越大，而不仅仅是测试登录。一个测试块将有很多行，而无法对其进行结构化。
是否可以设置一个页面以便在所有测试中共享？ beforeAll 钩子不接收任何页面，每个 test 块总是接收自己的页面。这意味着 test 块之间没有连接。如果您在 beforeAll 中手动创建一个页面并在每个测试中使用相同的页面实例，这可能是一种不好的做法，视频和跟踪可能无法正常工作..那么这里可以做什么？
像测试一样的用户旅程真的很糟糕吗？我觉得它们不能与文档中提到的 playwright 的夹具方法很好地结合起来。 playwright 中的装置感觉非常 data-driven，并不真正适合 end-to-end 测试 IMO。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

end-to-end javascript playwright playwright-test