面试中遇到的现场编码挑战，特别是那些故意设计来让你失败的挑战，确实会让人感到不悦。这里有12个关于Playwright的面试问题及答案，希望能给你一些优势。

　　这些问题的创建是为了迷惑你，所以如果你没有答对，也不要对自己太苛刻。同时，一些答案包含解释和代码示例。请滚动到页面底部查看。

　　1. 本地环境

　　如果你在本地机器上使用你需要设置并启动的本地环境运行测试，例如在 http://localhost:3000/，你将如何在测试运行期间处理本地环境的设置？

　　可能的答案：

　　· 在运行测试之前启动你的本地环境

　　· 在package.json中编写一个脚本来启动本地环境并运行你的测试

　　· 使用webServer

　　答案

　　所有可能的答案都是有效的，但推荐的方法是使用webServer配置。

　　2. contain比较

　　除了一个接受定位器，另一个接受值之外，await expect(locator).toContainText()和await expect(value).toContain()两者之间的主要区别是什么：

　　答案

　　第一个是自动重试断言，意味着它将重试最多5秒钟，直到元素出现；第二个将尝试一次性断言。

　　3. 延迟加载

　　在下面的URL中，文本 "Loading complete" 将在10秒后出现。我们的测试在expect步骤中失败，预期：可见，收到：隐藏。你如何修复这个测试？

　　test("The visible methods", async ({ page }) => {
　　  await page.goto("https://webdriveruniversity.com/Accordion/index.html"); 
　　  await expect(page.getByText("LOADING COMPLETE.")).toBeVisible()
　　});

　　答案

　　默认的expect超时是5秒，如果在该时间间隔内元素不可见，测试将失败。为了修复测试，我们通过添加一个超时，仅为此步骤延长超时，超过我们知道的10秒延迟，如下所示：await expect(page.getByText("LOADING COMPLETE.")).toBeVisible({ timeout: 12000 })

　　4. 自我修复

　　知道magento.softwaretestingboard.com上有一个名为 "Sale" 的菜单项，点击它将导航到一个新页面。完成下面的测试，通过编写一个新的步骤，点击 "Sale" 菜单选项，但为该元素创建一个自我修复的定位器。

　　test("The self-healing", async ({ page }) => {
　　  await page.goto("https://magento.softwaretestingboard.com/"); 
　　  await page.getByLabel('Consent', { exact: true }).click()
　　});

　　答案

　　自我修复定位器是指你使用多个定位器指向同一个元素，但使用辅助方法或使用OR运算符将它们链接在一起。使用OR运算符，你可以提供多个指向同一元素的定位器，如果一个由于应用程序更改而损坏，它可以尝试使用另一个。

　　5. 关闭的浏览器

　　这段代码将做什么：

　　test("The closed browser", async ({ page }) => {
　　  await page.goto("https://blog.martioli.com/"); 
　　  await page
　　    .getByRole('link', { name: 'About' })
　　    .click();
　　  expect(page).toHaveURL(/about/);
　　});

　　可能的答案：

　　· 测试将失败，因为About是一个按钮而不是一个链接

　　· 测试将因目标页面出错而失败

　　· 测试将因传递给.toHaveURL()的参数而失败

　　答案

　　测试将因目标页面出错而失败。错误：expect.toHaveURL: 目标页面、上下文或浏览器已关闭。

　　6. 引用

　　知道第二步上点击的元素是一个页面上的返回链接，这段代码将做什么：

　　test("The reference", async ({ page }) => {
　　  await page.goto("https://blog.martioli.com/playwright-tips-and-tricks-1/"); 
　　  await page
　　    .locator('section').locator('p').locator('a').getByText('buy me a coffee').click()
　　  await expect(page).toHaveURL(/blog.martioli.com/)
　　});

　　可能的答案：

　　· 测试将失败，因为'buy me a coffee'是一个链接，我们已经从martioli.com导航离开了

　　· 测试将通过

　　· 测试将失败，因为你不能混合使用locator().locator().locator()

　　答案

　　测试将通过，因为点击返回链接将生成一个带有我们初始来源（blog.martioli.com）引用的URL。

　　7. 其他语言环境

　　修改下面的测试，并让它用不同的语言环境运行，例如德语。

　　test("The locale", async ({ page }) => {
　　  await page.goto("https://www.google.com/"); 
　　});

　　答案

　　你可以在测试内部修改配置。只需在测试上方添加 test.use({locale: 'de-DE'})

　　8. CSS属性

　　考虑到下面的代码，你如何改进它以提高可读性和简洁性。

　　test("The css properties", async ({ page }) => {
　　  await page.goto("https://magento.softwaretestingboard.com/"); 
　　  await page.getByLabel('Consent', { exact: true }).click()
　　  
　　  const element = page.getByText("Shop New Yoga")
　　  const backgroundColor = await element.evaluate((el) => {
　　    return window.getComputedStyle(el).getPropertyValue('background-color');
　　  });
　　  expect(backgroundColor).toBe("rgb(25, 121, 195)")
　　});

　　答案

　　你不需要调用evaluate，因为你已经有一个内置的方法叫做toHaveCSS()。同时记住，toHaveCSS()具有自动重试功能，这在等待某些元素属性延迟出现时至关重要。

　　9. 长按

　　考虑到下面的代码，你如何修改点击步骤以模拟按住左鼠标按钮3秒钟然后释放鼠标按钮。

　　test("The long click", async ({ page }) => {
　　  await page.goto("https://www.clickspeedtester.com/mouse-test/"); 
　　  await page.getByRole('link', { name: 'Second Clicker' }).click()
　　});

　　答案

　　Click可以可选地接受一个对象，其中属性为delay，值为毫秒。像这样：.click({delay: 3000})将它与元素配对，它将在该元素上持续3秒钟然后释放鼠标按钮。

　　10. 强制

　　页面上有一个数据同意弹出窗口，你必须遵守。"搜索"按钮隐藏在这个模态框后面。给定以下代码。将会发生什么？

　　test("The force", async ({ page }) => {
　　  await page.goto("https://www.google.com/"); 
　　  
　　  // 搜索输入字段
　　  await page.locator('textarea').first().fill("martioli")
　　  // 搜索按钮
　　  await page.locator('[type=submit][name="btnK"]').last().click({ force: true })
　　});

　　可能的答案：

　　· 测试将通过。我使用了{force:true}，它将点击按钮并在模态框后面显示结果

　　· 测试将通过，但模态框后面不会显示结果

　　· 测试将失败，超时，因为它不能点击模态框后面的按钮

　　答案

　　测试将通过，但模态框后面不会显示结果。force:true不会在元素在另一个元素下面时点击，但它也不会出错（playwright的bug？）。填充()的情况并非如此。如果你检查输入，它在输入字段中输入没有问题。

　　11. 基础URL

　　我在配置文件中设置了baseUrl。这段代码将做什么：

　　test("The baseurl", async ({ page }) => {
　　  await page.goto('');
　　});

　　可能的答案：

　　· 测试将失败。我在引号之间忘记了/

　　· 测试将失败，因为.goto()需要双引号

　　· 测试将通过

　　答案

　　测试将通过，空字符串和"/"的作用相同。它将导航到在playwright.config.js中配置的baseUrl。

　　12. 工作线程

　　考虑到下面的关于工作线程的配置。如果我运行100个测试套件，它们将如何运行：

　　module.exports = defineConfig({
　　  testDir: "./tests",
　　  workers: "5%",
　　  projects: [
　　    {
　　      name: "chromium",
　　      use: { ...devices["Desktop Chrome"] },
　　    },
　　  ],
　　});

　　可能的答案：

　　· 测试将以工作线程的5%的功率运行得非常慢

　　· 测试将在你拥有的CPU核心数的5%上运行

　　· 测试甚至不会开始，因为你不能为工作线程设置百分比值

　　答案

　　测试将在你拥有的CPU核心数的5%上运行。例如，如果你有4个核心，这意味着100%中的4个将意味着每个25%。在我们的情况下，5是25%以下，所以你将只有一个工作线程。

作者：Adrian Maciuc    

来源：http://www.51testing.com/html/52/n-7800852.html