标签: jest-puppeteer
使用puppeteer在具有窗口访问权限的真实浏览器环境中运行jest单元测试
我想要的是
我的代码广泛依赖于全局窗口对象（及其方法），而jsdom并未完全实现该对象，但在实际的浏览器环境中可用。因此，我想在操纵up页面上下文环境中运行单元测试，以便覆盖的代码（及其依赖项）可以访问真实的窗口对象。
问题
主要的问题是操纵up的人设计为在页面上下文之外运行e2e测试。我发现没有办法像jsdom那样在页面上下文中执行具体的测试套件，尽管它是公共接口/ GUI（这杀死了整个单元测试的想法），但没有运行整个构建。
我尝试了什么
我试图编写自定义测试环境以在puppeteer page.evaluate上下文中运行每个测试套件，该上下文可以访问窗口对象：
const PuppeteerEnvironment = require('jest-environment-puppeteer');
module.exports = class TestEnvironment extends PuppeteerEnvironment {
constructor(config) {
super(config);
}
async runScript(script){
if(this.global.page){
return await this.global.page.evaluate((runner, script)=>{
return runner(script);
}, super.runScript, script)
} else{
return null;
}
}
};
但是，似乎puppeteer序列化了评估参数，所以我找不到在上下文中进行runScript调用的方法。
我也尝试将评估窗口对象克隆到全局变量中，但由于相同的原因没有运气（序列化问题）
async setup(config){
const setupResult = await super.setup(config);
const window = await this.global.page.evaluate( () => window)
this.globals.window = window;
return setupResult;
}
};
推荐指数
解决办法
查看次数
Jest + puppeteer 最佳架构实践
我刚刚进入了 puppeteer 和 jest 的测试世界，我想知道在文件夹架构和逻辑方面的最佳实践是什么。
我以前从未做过测试，我认为我对不同的原则和概念以及它们如何组合在一起有点迷失。
我学会了基于页面对象模型进行测试，因此我为每个页面以及每个模块（或组件）都有类。例如，在我的应用程序中，标题或登录模式是组件。
然后我每个页面或每个组件都有一个测试文件。（例如landingPage.tests.js文件，它使用文件中LandingPage类的模型LandingPage.js）
这是一个具体的例子：我有不同的登录案例，我想测试它们。例如，我想测试与“普通”用户的连接，该过程只是登录然后输入密码。然后，我需要与已激活 2FA 的用户或使用 SSO 的公司的用户进行测试。
我首先考虑将我的不同测试放在authentication.tests.js不同的describe块中，认为它每次都会打开一个新标签，但它没有......我在隐身模式下使用 puppeteer 来确保每个标签都是一个独立的会话。
所以我的问题是：
哪里是做这些测试套件的最佳地点？
我是否应该拥有“描述”页面的测试文件（例如，按钮必须存在，此类文本必须在此处等）并且还有“场景类型”测试文件（对用户的一组上下文操作，例如对于我不同的登录情况）？
这是authentication.tests.js，我想测试我所有不同的登录方式：
import HeaderComponent from "../../../pages/components/HeaderComponent";
import AuthenticationComponent from "../../../pages/components/AuthenticationComponent";
import LandingPage from "../../../pages/landing/LandingPage";
import {
JEST_TIMEOUT,
CREDENTIALS
} from "../../../config";
describe('Component:Authentication', () => {
let headerComponent;
let authenticationComponent;
let landingPage;
beforeAll(async () => {
jest.setTimeout(JEST_TIMEOUT);
headerComponent = new HeaderComponent;
authenticationComponent = new AuthenticationComponent;
landingPage = new LandingPage;
});
describe('Normal login ', …推荐指数
解决办法
查看次数
Jest-Puppeteer 测试随机失败且没有输出
我有以下测试用例：
\nit('User can logout', async () => {\n await helper.navClick('.header-user-action__logout');\n const url = page.url();\n console.log(url)\n await expect(url).toContain('auth');\n});\nhelper.navClick只是一个小包装：
async function navClick(selector, options) {\n return await Promise.all([page.waitForNavigation(), expect(page).toClick(selector, options)]);\n}\n大多数时候，它会成功，没有任何问题，但有时会被标记为失败：
\n \xe2\x9c\x95 User can logout (569 ms)\n\n \xe2\x97\x8f Login \xe2\x80\xba User can logout\n\n\n\n\n\n console.log\n https://auth.example.com/auth/realms/example/protocol/openid-connect/auth?response_type=code&client_id=example-app&redirect_uri=https%3A%2F%2Fexample.com%2Fsso%2Flogin&state=807469fd-3ee5-4d93-8354-ca47a63e69a6&login=true&scope=openid\n\n怎么会发生这种事呢？该网址多次包含“auth”，并且我没有看到任何其他可能导致测试失败的内容。
\n推荐指数
解决办法
查看次数
用于输入的 Puppeteer 方法永远不会完成输入传递给它们的完整字符串
问题
问题摘要：我正在编写几个测试套件（使用 Jest 和 Puppeteer）来自动化我的 AngularJS 应用程序主页的测试。我想自动化的许多测试涉及用<textareas>'s填写表单，其中需要输入字符串（不同长度）。但问题是每个 Puppeteer 可用于打字的方法都极其不一致，因为并非所有传递给这些方法的字符串中的字符都最终被打字，有时这些方法甚至会破坏后续方法做不相关的事情。
测试环境概览
- 傀儡师版本：1.19.0
- 玩笑版本：24.8.0
我努力做到的
研究：我在 Puppteeer 的 Github 问题页面上广泛搜索了解决方案，因为这个问题似乎非常普遍。到目前为止，我已经尝试了#1648、#2784、#1958和#1223 中提供的解决方案。以下是我尝试过的代码片段，摘自这些不同的答案。到目前为止，他们都没有工作。
<!-- index.html -->
<html>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<md-content>
<form test-id="myForm">
<md-input-container>
<div>
<textarea ng-model="myCtrl.user.name" test-id="userName"></textarea>
</div>
</md-input-container>
<md-input-container>
<input type="file" ng-model="myCtrl.user.photo" test-id="uploadPhoto">
</md-input-container>
<md-dialog-actions>
<button type="submit" test-id="submitForm">Submit</button>
</md-dialog-actions>
</form>
</md-content>
</div>
<!-- These divs appear after the form has been submitted -->
<div>
<p><!-- username goes here --></p> …推荐指数
解决办法
查看次数
如何在 Puppeteer Node js 中从 xPath 获取文本
我需要从 span 标签获取文本并验证文本是否等于“check”。
我怎样才能在木偶师中实现这一目标？
下面是我编写的代码示例，如果有人可以帮我解决这个问题，请。
const puppeteer = require("puppeteer");
(async () => {
const browser = await puppeteer.launch({
headless: false,
// "slowMo": 50,
args: ["--start-fullscreen"],
defaultViewport: null,
});
//Page
const page2 = await browser.newPage();
await page2.goto("https://www.flipkart.com");
await page2.waitFor(2000);
await page2.$x("//input[@class='_2zrpKA _1dBPDZ']").then(async (ele) => {
await ele[0].type(username);
});
await page2.waitFor(2000);
await page2.$x("//input[@type='password']").then(async (ele) => {
await ele[0].type(password);
});
await page2.waitFor(2000);
await page2
.$x("//button[@class='_2AkmmA _1LctnI _7UHT_c']")
.then(async (ele) => {
await ele[0].click();
});
await page2.waitFor(2000);
await page2.$x("//input[@class='LM6RPg']").then(async (ele) => {
await ele[0].type("iPhone …推荐指数
解决办法
查看次数
升级到 Big Sur 后的 Jest 测试错误
升级到 Big Sur 后，我的一些玩笑测试抛出了这个错误。它还向控制台发送垃圾邮件
Chromium[29916:572689] Warning: Expected min height of view: (<NSButton: 0x7ffe74b9ac90>) to be less than or equal to 30 but got a height of 32.000000. This error will be logged once per view in violation.
和
[.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : DoEndSharedImageAccessCHROMIUM: bound texture is not a shared image
最终停止测试 sysctlbyname kern.nx: No such file or directory
brew upgrade升级到 Big Sur 后我已经完成了，但它没有修复这些错误。
推荐指数
解决办法
查看次数
为什么我需要在 `npm install` 之后运行 `node install.js` 来“重新安装”Puppeteer？（错误：未下载 Chromium 修订版。）
否则，当我尝试使用 Puppeteer 运行测试时，我得到Error: Chromium revision is not downloaded. Run "npm install" or "yarn install"
似乎npm i在我的部门中使用 Puppeteer 就足够了，但安装完成后，我需要cd进入/node_modules/puppeteer然后运行node install.js才能下载正确的修订版。
当我做初始时npm i我看到
> puppeteer@1.13.0 install /Users/.../node_modules/puppeteer
> node install.js
Downloading Chromium r549031 - 76 Mb [====================] 100% 0.0s
Chromium downloaded to /Users/.../node_modules/puppeteer/.local-chromium/mac-549031
但这不起作用，我收到修订错误。
在我node install.js进入 Puppeteer 的目录后，我看到
Downloading Chromium r637110 - 85.9 Mb [====================] 100% 0.0s
Chromium downloaded to /Users/.../node_modules/puppeteer/.local-chromium/mac-637110
那么我就可以走了。
有什么想法吗？这是在 macOS 和 Node 10.15 上进行的，我认为在 CI …
推荐指数
解决办法
查看次数
Jest Puppeteer - 为其设置 Visual Studio Code
我计划设置 env 以在 Visual Studio Code IDE 中进行测试。我遇到的问题是任何 XXX.test.js 文件中的 VS Code 都不知道什么是browser变量page。我收到这样的错误：
'page' is not defined.eslint(no-undef)
这仅与我正在使用的 IDE 有关吗？这个 IDE 的一些插件？或者也许这是正常的jest-puppeteer，我需要习惯它？
整个测试运行时工作正常，但似乎 IDE 不知道是什么page。
我现在正在研究这个简单的示例，我刚刚学习这个，但我正在尝试同时为其设置环境。我的Network.test.js文件看起来像这样。文件顶部根本没有导入或要求。
describe("Google", () => {
beforeAll(async () => {
await page.goto("https://google.com");
});
it('should display "google" text on page', async () => {
await expect(page).toMatch("google");
});
});
后来我需要将其切换到 Typescript，我认为这也是一个挑战。现在我只想专注于纯 javascript 方法。
如何摆脱这个实际上不是错误的 IDE 错误？
推荐指数
解决办法
查看次数