TypeScript + Playwright/Puppeteer测试标签通信

huangapple
go评论134阅读模式
英文:

TypeScript + Playwright/Puppeteer Test Tab communication

问题

以下是您提供的文本的中文翻译：

我尝试使用 Playwright 来测试我的演示 broadcastChannel 模块，但我无法将 Class 传递给 evaluate，或者将类实例注入到 Window。以下是最小可复现的示例。

utils.ts

  1. export class Utils {
  2.   public static formatTime() { return new Date().toLocaleString(); }
  3.   public static generateRandomStr() { /* 生成随机字符串的逻辑 */ }
  4. }

index.ts

  1. import { Utils } from "./utils";
  3. export class Channel<T extends string> {
  4.   private uniqueID = Utils.generateRandomStr();
  5.   private channel: BroadcastChannel;
  7.   constructor(name: T) {
  8.     this.channel = new BroadcastChannel(name);
  9.     this.onMessage();
  10.   }
  12.   private onMessage() {
  13.     this.channel.addEventListener("message", e => {
  14.       console.log(e.data);
  15.     });
  16.   }
  18.   public sendMsg(msg: any) {
  19.     this.channel.postMessage({
  20.       id: this.uniqueID,
  21.       time: Utils.formatTime(),
  22.       msg,
  23.     });
  24.   }
  26.   public sendHelloWorld() {
  27.     this.sendMsg("Hello World");
  28.   }
  30.   public sendByeWorld() {
  31.     this.sendMsg("Bye World");
  32.   }
  33. }

根据 @Sheldon Oliveira 的回答和 这个 Stack Overflow 回答，我了解到没有简单的方法来将 Class 或类实例传递给 evaluate。也许我选择了错误的方法来测试标签间通信，我希望有更好的解决方案。

以下是我尝试的两种不同方法。

  1. import { test, expect, Page } from '@playwright/test';
  2. import { Channel } from '../src/index';
  4. let page1: Page, page2: Page;
  5. test.beforeEach(async ({ context }) => {
  6.   [page1, page2] = await Promise.all([context.newPage(), context.newPage()]);
  7.   await Promise.all([page1.goto("https://www.google.com"), page2.goto("https://www.google.com")]);
  8. });
  10. test.afterEach(async ({ context }) => {
  11.   await Promise.all([page1.close(), page2.close()]);
  12.   await context.close();
  13. });
  15. test('sendHelloWorld', async () => {
  16.   await Promise.all([
  17.     await page1.evaluate((strClass) => {
  18.       eval("window.Channel = " + strClass);
  19.       window.channel = new window.Channel();
  20.       //                     ^ReferenceError: _Utils is not defined
  21.     }, Channel.toString()),
  22.     await page2.evaluate((strClass) => {
  23.       eval("window.Channel = " + strClass);
  24.       window.channel = new window.Channel();
  25.       //                     ^ReferenceError: _Utils is not defined
  26.     }, Channel.toString()),
  27.   ]);
  29.   const msgPromise = page2.waitForEvent("console");
  30.   await page1.evaluate(() => {
  31.     window.channel.sendHelloWorld();
  32.   });
  33.   const msg = await msgPromise;
  34.   expect((await msg.args()[0].jsonValue()).msg).toBe("Hello World");
  35. });
  37. test('sendByeWorld', async () => {
  38.   await Promise.all([
  39.     await page1.evaluate((channel) => {
  40.       window.channel = channel;
  41.       //             ^ no prototype method sendByeWorld
  42.     }, new Channel()),
  43.     await page2.evaluate((channel) => {
  44.       window.channel = channel;
  45.       //             ^ no prototype method sendByeWorld
  46.     }, new Channel()),
  47.   ]);
  49.   const msgPromise = page2.waitForEvent("console");
  50.   await page1.evaluate(() => {
  51.     window.channel.sendHelloWorld();
  52.   });
  53.   const msg = await msgPromise;
  54.   expect((await msg.args()[0].jsonValue()).msg).toBe("Bye World");
  55. });

期望的控制台技巧来自于 Playwright 文档。

我还添加了 "puppeteer" 标签，因为我认为无论使用哪个框架，问题都是相同的。

英文:

I tried to test my demo broadcastChannel module with playwright. But I cannot pass Class to evaluate or inject class instance to Window. Below is the minimal reproducible example.

utils.ts

  1. export class Utils {
  2.   public static formatTime() { return new Date().toLocaleString(); }
  3.   public static generateRandomStr() { /* generate random str logic*/ }
  4. }

index.ts

  1. import { Utils } from &quot;./utils&quot;;
  3. export class Channel&lt;T extends string&gt; {
  4.   private uniqueID = Utils.generateRandomStr();
  5.   private channel: BroadcastChannel;
  7.   constructor(name: T) {
  8.     this.channel = new BroadcastChannel(name);
  9.     this.onMessage();
  10.   }
  12.   private onMessage() {
  13.     this.channel.addEventListener(&quot;message&quot;, e =&gt; {
  14.       console.log(e.data);
  15.     });
  16.   }
  18.   public sendMsg(msg: any) {
  19.     this.channel.postMessage({
  20.       id: this.uniqueID,
  21.       time: Utils.formatTime(),
  22.       msg,
  23.     });
  24.   }
  26.   public sendHelloWorld() {
  27.     this.sendMsg(&quot;Hello World&quot;);
  28.   }
  30.   public sendByeWorld() {
  31.     this.sendMsg(&quot;Bye World&quot;);
  32.   }
  33. }

According to @Sheldon Oliveira's answer and this stackoverflow answer, I got that there's no easy way to pass Class or class instance to evaluate. Maybe I went for the wrong way to test tab communication, I hope there's a better solution.

Below are the two different approches I tried.

  1. import { test, expect, Page } from &#39;@playwright/test&#39;;
  2. import { Channel } from &#39;../src/index&#39;;
  4. let page1: Page, page2: Page;
  5. test.beforeEach(async ({ context }) =&gt; {
  6.   [page1, page2] = await Promise.all([context.newPage(), context.newPage()]);
  7.   await Promise.all([page1.goto(&quot;https://www.google.com&quot;), page2.goto(&quot;https://www.google.com&quot;)]);
  8. });
  10. test.afterEach(async ({ context }) =&gt; {
  11.   await Promise.all([page1.close(), page2.close()]);
  12.   await context.close();
  13. });
  15. test(&#39;sendHelloWorld&#39;, async () =&gt; {
  16.   await Promise.all([
  17.     await page1.evaluate((strClass) =&gt; {
  18.       eval(&quot;window.Channel = &quot; + strClass);
  19.       window.channel = new window.Channel();
  20.       //                     ^ReferenceError: _Utils is not defined
  21.     }, Channel.toString()),
  22.     await page2.evaluate((strClass) =&gt; {
  23.       eval(&quot;window.Channel = &quot; + strClass);
  24.       window.channel = new window.Channel();
  25.       //                     ^ReferenceError: _Utils is not defined
  26.     }, Channel.toString()),
  27.   ]);
  29.   const msgPromise = page2.waitForEvent(&quot;console&quot;);
  30.   await page1.evaluate(() =&gt; {
  31.     window.channel.sendHelloWorld();
  32.   });
  33.   const msg = await msgPromise;
  34.   expect((await msg.args()[0].jsonValue()).msg).toBe(&quot;Hello World&quot;);
  35. });
  37. test(&#39;sendByeWorld&#39;, async () =&gt; {
  38.   await Promise.all([
  39.     await page1.evaluate((channel) =&gt; {
  40.       window.channel = channel;
  41.       //             ^ no prototype method sendByeWorld
  42.     }, new Channel()),
  43.     await page2.evaluate((channel) =&gt; {
  44.       window.channel = channel;
  45.       //             ^ no prototype method sendByeWorld
  46.     }, new Channel()),
  47.   ]);
  49.   const msgPromise = page2.waitForEvent(&quot;console&quot;);
  50.   await page1.evaluate(() =&gt; {
  51.     window.channel.sendHelloWorld();
  52.   });
  53.   const msg = await msgPromise;
  54.   expect((await msg.args()[0].jsonValue()).msg).toBe(&quot;Bye World&quot;);
  55. });

The expect console trick is from playwright documentation.

I also added puppeteer tag, cause I think the problem is the same regardless of the framework.

答案1

得分: 1

TLDR; 你不能将类作为评估的参数使用。

文档：
此参数可以是可序列化的值和JSHandle或ElementHandle实例的混合。

一个类不是可序列化的值。

英文:

TLDR; you can not use a class as a parameter for evaluate.

docs:
This argument can be a mix of Serializable values and JSHandle or ElementHandle instances.

A class is not a serializable value.

huangapple
  • 本文由 发表于 2023年6月6日 00:53:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/76408515.html
  • playwright
  • puppeteer
  • testing
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定