Me gustaría probar algunas API que están vinculadas directamente al navegador y no necesariamente tienen representación de interfaz de usuario.
La prueba más simple es algo como:
import { test, expect } from "@playwright/test"; test("creates Image element", async ({ page }) => { await page.goto(`http://localhost:3333/e2e/assets/Dynamic.spec.html`); const img = new Image(); const asset = new DynamicAsset(img); expect(asset.element()).toEqual(img); });Al usar Cypress, todas las pruebas se ejecutan en el contexto del navegador. Eso funcionaria.
Pero en dramaturgo se produce el siguiente error:
ReferenceError: Image is not defined at file:///Users/tomche/development/frontendara/amandes/e2e/assets/Dynamic.spec.js:6:15 Y si usa page.evaluate como:
import { test, expect } from "@playwright/test"; test("creates Image element", async ({ page }) => { await page.goto(`http://localhost:3333/e2e/assets/Dynamic.spec.html`); await page.evaluate(() => { const img = new Image(); const asset = new DynamicAsset(img); expect(asset.element()).toEqual(img); }); });El error es:
page.evaluate: ReferenceError: expect is not definedLo que sucede porque el código evaluado en el contexto del navegador no tiene importaciones desde el alcance superior.
La documentación parece mencionar solo cosas que son serializables, pero este código necesita que se verifiquen cosas complejas que no son realmente simulables en el nodo o serializables.
Entonces, ¿hay alguna forma de ejecutar aserciones dentro del navegador similar a cypress/karma, etc.?
Al ejecutar el código de prueba completo actualizado, se puede esperar que funcione fuera de evaluate()
(Pero tenga en cuenta que tengo un mensaje de error diferente del original)
import { test, expect } from "@playwright/test"; test("creates Image element", async ({ page }) => { await page.goto(`http://localhost:3333/e2e/assets/Dynamic.spec.html`); const result = await page.evaluate(() => { const img = new Image(); const asset = new DynamicAsset(img); return {img, asset} }); expect(result.asset.element()).toEqual(result.img); });Pase expect a page.evaluate()
import { test, expect } from "@playwright/test"; test("creates Image element", async ({ page }) => { await page.goto(`http://localhost:3333/e2e/assets/Dynamic.spec.html`); await page.evaluate((expect) => { const img = new Image(); const asset = new DynamicAsset(img); expect(asset.element()).toEqual(img); }, expect); });