我正在尝试使用 Playwright 来测试 Ionic React 应用程序。

Ionic 广泛使用 CSS 变量。

我的应用程序允许用户更改其中一些颜色，因此我想验证颜色更改是否正常工作。

我正在尝试找到一种方法来测试 CSS 变量的值。

Ionic CSS 看起来像这样：

ion-header ion-toolbar {
  --background: var(--ion-color-secondary);
}

--background我如何才能获得Playwright的价值？

我正在开发这个模板，其中使用 DragTo() 函数进行拖放。当我在头部模式下运行测试时，它工作得很好。但是当我在无头模式下运行测试时，它根本不会拖动任何东西，并且测试将在页面空白的情况下通过。有什么方法可以减慢拖动速度，以便页面可以在跳转到其他操作之前识别拖动的元素？

我尝试通过以下方式添加超时但仍然没有运气：

await this.page.locator('text=Column').first()
  .dragTo(this.page.locator('[role="tabpanel"]')
  .first(), {force:true}), {timeout:3000};

我正在测试两个相互链接的网站。我从第一个网站开始，其中有指向第二个网站的链接 (_blank)。我想继续在该选项卡上进行测试。

test('test', async ({ page }) => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  await page.goto('https://example.io/');

  const [newPage] = await Promise.all([
   context.waitForEvent('page'),
   page.locator('a.browser-button').first().click() // Opens tab
    ])
   await newPage.waitForLoadState();
   console.log(await newPage.title());

  await page.screenshot({ path: 'test.png', fullPage: true });
  await browser.close();
});

所以我单击按钮，打开一个新选项卡。然后我想从那里继续。相反，我收到错误：

超时超过 30000 毫秒。context.waitForEvent('页面')

我也按照文档中的方式尝试过，但也无法使其工作： https: //playwright.dev/docs/pages

我尝试使用命令安装 playwright

npm i playwright

但出现错误

npm ERR! code 1
npm ERR! path C:\Users\hpoddar\node_modules\playwright
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node install.js

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hpoddar\AppData\Local\npm-cache\_logs\2022-07-22T08_07_17_487Z-debug-0.log

2022-07-22T08_07_17_487Z-debug-0.log说

0 verbose cli [
0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'i',
0 verbose cli   'playwright'
0 verbose cli ]
1 info using npm@8.5.0
2 info using node@v16.14.2
3 timing …

我需要在我的网页中找到特定元素。该元素可能位于页面中，也可能不在页面中。

如果元素不可见，此代码会给我错误：

error_text = self.page.wait_for_selector(
            self.ERROR_MESSAGE, timeout=7000).inner_text()

如何使用超时查找元素，并获得一个布尔值告诉我是否找到该元素？

朋友们，有没有人有代码可以让我将屏幕截图包含在我想要的行中，并将此打印附加到标准剧作家报告中？

我正在使用带有 javascript 的 playwright在此处输入图像描述 npx plawright show-report

1. 初始帖子

我知道 Playwright 有自动等待功能。

我有一个测试，有时单击有效，有时无效。下面是代码。

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {

 await page.goto('https://website.com');

  await page.getByRole('link', { name: 'Log in' }).click();
  await expect(page).toHaveURL('https://website.com/login/');

});

错误：

Expect(received).toHaveURL(expected) 预期字符串：“https://website.com/login/” 收到字符串：“https://website.com”

这是一段带有登录按钮的 HTML

<span data-v-154d6ddf="" class="absolute-top-right">
  <div class="row justify-end q-gutter-x-sm q-pt-lg q-px-sm">
    <div class="col-auto">
      <a tabindex="0" type="button" href="/login/potential" role="link" class="q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--rectangle text-white q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase q-btn--wrap">
        <span class="q-focus-helper" tabindex="-1"></span>
        <span class="q-btn__wrapper col row q-anchor--skip">
          <span class="q-btn__content text-center col …

我已在 Windows 上验证我已安装 Powershell - 最新版本。

当我从 Playwright 网站运行命令时：

pwsh bin/Debug/netX/playwright.ps1 install

我收到以下错误：“argument bin/Debug/netX/playwright.ps1”未被识别为脚本文件的名称。我一直无法找到解决办法。*

*添加更多错误

我希望能够在所有测试中使用定位器变量，而不必每次在每个测试中都定义它。就像是：

// @ts-check
const { test, expect } = require('@playwright/test');

test.beforeEach( async ({ page }) => {
  await page.goto('[desired URL]');  
});

// I want to make this variable global to be able to use it within all the tests.
const signInBtn = page.getByTestId('some-button'); // how to resolve 'page' here??

test.describe('My set of tests', () => {

  test('My test 1', async ({ page }) => {
    await expect(page).toHaveTitle(/Some-Title/);
    await expect(signInBtn).toBeEnabled();     // I wanna use the variable here...
  });
  
  test('My test 2', …

我的问题与customAxios.interceptors.response.use. 我来这里的目的是；如果令牌过期并且出现 401 错误，请在出现 401 错误时再次发出请求，并将新令牌写入标头。另一方面，如果我收到除 401 错误之外的错误，请显示error.response.data. 你认为这个逻辑设置正确吗？我尝试测试，但我不确定，尤其是 401 错误情况

import axios from "axios";
import { LoginAPI } from "../playwright/tests/login/login.api";
import { test } from "@playwright/test"
import {configEnv} from "../config/config"

test.beforeAll(async () => {
    await LoginAPI.API.Signin.run()
});
const customAxios = axios.create({
    baseURL: configEnv.apiBaseURL
});

customAxios.interceptors.request.use(
    async (config) => {
        if (config.headers) {
            config.headers['Authorization'] = `Bearer ${LoginAPI.States.token}`;
            return config;
        }
        return config;
    },
    (error) => {
        Promise.reject(error);
    }
);

customAxios.interceptors.response.use(
    function(response) {
      return response;
    },
   async …