Wie auslöste ich die Tastaturverknüpfung der Browser -Erweiterung in Dramatikern? ⇐ JavaScript

[Anonymous]

Ich versuche meine Browser -Erweiterung zu testen. Durch das Drücken von Strg+Q Befehl injiziert das HTML -Formular in eine aktuelle Seite. Ich möchte dieses Verhalten testen, aber Dramatiker scheint es bei Tests nicht auszulösen, was dazu führt, dass der Test fehlschlägt. Wenn ich die Verknüpfung manuell drücke, während die Browser -Instanz ausgeführt wird, wird das Formular korrekt angezeigt. Was mache ich falsch?

Code: Select all

import test, { chromium, expect } from "@playwright/test";
import path from "path";

test.use({ browserName: 'chromium' });

test('Open example.com and trigger the popup form', async () => {
const pathToExtension = path.resolve(__dirname, '..', 'dist');
const userDataDir = path.resolve(__dirname, '..', 'tmp-profile');

const browserContext = await chromium.launchPersistentContext(userDataDir, {
headless: false,
args: [
`--disable-extensions-except=${pathToExtension}`,
`--load-extension=${pathToExtension}`
]
});

const page = await browserContext.newPage();
await page.goto('https://example.com');
await page.waitForLoadState('networkidle');

console.log('Browser launched...');

await page.keyboard.press('Control+q');

const popupForm = await page.getByLabel('extension-popup-form');
await expect(popupForm).toBeVisible();
await browserContext.close();
});
< /code>
Dateien zum [url=viewtopic.php?t=11587]Problem[/url] der [url=viewtopic.php?t=11587]Problem[/url] ">{
"manifest_version": 3,
"name": "MRE",
"author": "example@mail.com",
"version": "1.0",
"action": {
"default_title": "Click to show the form"
},
"permissions": [
"activeTab",
"declarativeNetRequestWithHostAccess",
"scripting",
"storage",
"tabs"
],
"host_permissions": ["*://*/"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"matches": [""],
"js": ["browser-polyfill.js"]
}],
"commands": {
"trigger_form": {
"suggested_key": {
"default": "Ctrl+Q",
"mac": "Command+Y"
},
"description": "Click to show the form"
}
},
"web_accessible_resources": [
{
"resources": [],
"matches": [""]
}
],
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
}
< /code>
Background.ts:
import browser from 'webextension-polyfill';

browser.commands.onCommand.addListener(command => {
if (command === 'trigger_form') {
browser.tabs.query({ active: true, currentWindow: true })
.then((tabs) => {
const tab = tabs[0];
if (tab) {
triggerPopup(tab);
}
})
.catch(error => console.error(error));
}
});

function triggerPopup(tab: browser.Tabs.Tab) {
if (tab.id) {
const tabId = tab.id;

browser.scripting.executeScript
? browser.scripting.executeScript({
target: { tabId },
files: ['./content.js'],
})
: browser.tabs.executeScript({
file: './content.js',
});
}
}
< /code>
Content.ts:
async function showPopup() {
const body = document.body;
const formExists = document.getElementById('extension-popup-form');
if (!formExists) {
const popupForm = document.createElement('form');
popupForm.classList.add('extension-popup-form');
popupForm.id = 'extension-popup-form';
popupForm.ariaLabel = 'extension-popup-form';

const popupInput = document.createElement('input');
popupInput.classList.add('url-input');
popupInput.name = 'url';
popupInput.type = 'text';
popupInput.placeholder = 'example.com';

body.appendChild(popupForm);
}
}

showPopup();
< /code>
Ich habe dies ausprobiert: < /p>

[*] Versandereignis wie folgt: < /li>
< /ul>
await page.evaluate(() =>  {
document.dispatchEvent(new KeyboardEvent('keydown', {
key: 'q',
code: 'KeyQ',
ctrlKey: true,
bubbles: true,
cancelable: true
}));
});
< /code>

 Simulierte jeder Taste, falls die automatisierte Verknüpfung schnell: < /li>
< /ul>
  await page.keyboard.down('Control');
await page.waitForTimeout(800);
await page.keyboard.press('q');
await page.waitForTimeout(600);
await page.keyboard.up('Control');
< /code>

 Versuchte sich auf ein Element einer Seite zu konzentrieren, bevor das Ereignis abgefeuert wurde. /www.toptal.com/developers/keycode, um sicherzustellen Ereignis: < /li>
< /ul>
await page.waitForTimeout(5000);

Versucht, den Befehl manuell zu drücken, während die Browser -Instanz ausgeführt wurde, um sicherzustellen, dass die Erweiterung korrekt geladen wurde (es war). < Br /> < /ul>