新增表单提交功能:在浏览器命令中添加 submitForm 方法,支持通过选择器填写输入框并提交表单

This commit is contained in:
fofolee 2025-01-23 10:46:52 +08:00
parent f4245a5744
commit 603cadb2ef
3 changed files with 47 additions and 1 deletions

View File

@ -326,7 +326,7 @@ const executeScript = async (tab, script, args = {}) => {
const argValues = Object.values(args).map((v) => JSON.stringify(v));
const wrappedScript = `
(function(${argNames.join(", ")}) {
(async function(${argNames.join(", ")}) {
${script}
})(${argValues.join(", ")})
`;

View File

@ -19,6 +19,27 @@ const inputText = async (tab, selector, text) => {
);
};
const submitForm = async (tab, buttonSelector, inputSelectors) => {
return await executeScript(
tab,
`
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
let el = null;
${inputSelectors
.map(
(i) =>
`el = document.querySelector('${i.selector}');
el.value = '${i.value}';
el.dispatchEvent(new Event('input'));
el.dispatchEvent(new Event('change'));`
)
.join("await sleep(200);")}
await sleep(200);
document.querySelector('${buttonSelector}').click();
`
);
};
const getText = async (tab, selector) => {
return await executeScript(
tab,
@ -116,6 +137,7 @@ const injectCSS = async (tab, css) => {
module.exports = {
clickElement,
inputText,
submitForm,
getText,
getHtml,
hideElement,

View File

@ -410,6 +410,30 @@ export const browserCommands = {
},
],
},
{
value: "quickcomposer.browser.submitForm",
label: "提交表单",
icon: "send",
config: [
{
topLabel: "上方填要点击的提交按钮,下方添加要操作的输入框",
component: "ArrayEditor",
width: 12,
columns: {
selector: {
label: "输入框选择器",
options: {
cssSelector: true,
},
},
value: {
label: "要填入的值",
},
},
isCollapse: false,
},
],
},
{
value: "quickcomposer.browser.getText",
label: "获取文本",