|
|
发表于 2024-12-26 18:05:19
|
显示全部楼层
四川省资阳市
// 等待页面加载完成后执行操作
await waitForPageLoad();
simulateInput('#username', 'test');
// 等待特定元素出现后操作
await waitForElement('#loginButton');
simulateClick('#loginButton');
// 等待多个元素都出现
await waitForElements(['#username', '#password', '#loginButton']);
// 等待页面变化完成后操作
await waitForPageStable();
simulateInput('#searchBox', 'query');
// 等待网络请求完成
await waitForNetworkIdle();
console.log('所有请求已完成');
// 检查元素状态
if (isElementVisible('#submitButton') && isElementInteractive('#submitButton')) {
simulateClick('#submitButton');
}
// 组合使用示例
async function login(username, password) {
await waitForPageLoad();
await waitForElement('#loginForm');
simulateInput('#username', username);
simulateInput('#password', password);
await waitForPageStable();
simulateClick('#loginButton');
await waitForNetworkIdle();
console.log('登录流程完成');
}
[JavaScript] 纯文本查看 复制代码 // 基础输入框操作
function simulateInput(selector, value) {
const element = document.querySelector(selector);
if (!element) {
console.error('元素未找到:', selector);
return false;
}
let reactInstance = null;
for (const key in element) {
if (key.startsWith('__reactProps$')) {
reactInstance = element[key];
break;
}
}
if (reactInstance && reactInstance.onChange) {
reactInstance.onChange({
target: {
value: value
}
});
return true;
}
// 如果不是 React 元素，使用原生方式
element.value = value;
element.dispatchEvent(new Event('input', { bubbles: true }));
element.dispatchEvent(new Event('change', { bubbles: true }));
return true;
}
// 模拟点击操作
function simulateClick(selector) {
const element = document.querySelector(selector);
if (!element) {
console.error('元素未找到:', selector);
return false;
}
element.click();
return true;
}
// 复选框操作
function simulateCheckbox(selector, checked) {
const element = document.querySelector(selector);
if (!element) {
console.error('元素未找到:', selector);
return false;
}
element.checked = checked;
element.dispatchEvent(new Event('change', { bubbles: true }));
return true;
}
// 下拉框选择
function simulateSelect(selector, value) {
const element = document.querySelector(selector);
if (!element) {
console.error('元素未找到:', selector);
return false;
}
element.value = value;
element.dispatchEvent(new Event('change', { bubbles: true }));
return true;
}
// 单选框操作
function simulateRadio(name, value) {
const elements = document.querySelectorAll(`input[name="${name}"]`);
if (!elements.length) {
console.error('未找到单选框组:', name);
return false;
}
for (const element of elements) {
if (element.value === value) {
element.checked = true;
element.dispatchEvent(new Event('change', { bubbles: true }));
return true;
}
}
console.error('未找到对应值的单选框:', value);
return false;
}
// 文本区域操作
function simulateTextarea(selector, value) {
const element = document.querySelector(selector);
if (!element) {
console.error('元素未找到:', selector);
return false;
}
element.value = value;
element.dispatchEvent(new Event('input', { bubbles: true }));
element.dispatchEvent(new Event('change', { bubbles: true }));
return true;
}
// 表单提交
function simulateSubmit(formSelector) {
const form = document.querySelector(formSelector);
if (!form) {
console.error('表单未找到:', formSelector);
return false;
}
form.submit();
return true;
}
// 清除表单
function clearForm(formSelector) {
const form = document.querySelector(formSelector);
if (!form) {
console.error('表单未找到:', formSelector);
return false;
}
form.reset();
return true;
}
// 等待页面加载完成
function waitForPageLoad() {
return new Promise((resolve) => {
if (document.readyState === 'complete') {
resolve();
} else {
window.addEventListener('load', resolve);
}
});
}
// 等待特定元素出现
function waitForElement(selector, timeout = 10000) {
return new Promise((resolve, reject) => {
const element = document.querySelector(selector);
if (element) {
resolve(element);
return;
}
const observer = new MutationObserver((mutations, obs) => {
const element = document.querySelector(selector);
if (element) {
obs.disconnect();
resolve(element);
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
// 设置超时
setTimeout(() => {
observer.disconnect();
reject(new Error(`等待元素超时: ${selector}`));
}, timeout);
});
}
// 等待多个元素都出现
function waitForElements(selectors, timeout = 10000) {
return Promise.all(selectors.map(selector => waitForElement(selector, timeout)));
}
// 等待页面变化完成（适用于单页应用）
function waitForPageStable(timeout = 1000) {
return new Promise((resolve) => {
let timer;
const observer = new MutationObserver(() => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
observer.disconnect();
resolve();
}, timeout);
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true
});
});
}
// 等待网络请求完成
function waitForNetworkIdle(timeout = 1000) {
return new Promise((resolve) => {
let timer;
let pendingRequests = 0;
const originalFetch = window.fetch;
const originalXHR = window.XMLHttpRequest.prototype.send;
window.fetch = async function(...args) {
pendingRequests++;
try {
const response = await originalFetch.apply(this, args);
return response;
} finally {
pendingRequests--;
checkRequests();
}
};
window.XMLHttpRequest.prototype.send = function(...args) {
pendingRequests++;
this.addEventListener('loadend', () => {
pendingRequests--;
checkRequests();
});
return originalXHR.apply(this, args);
};
function checkRequests() {
if (timer) clearTimeout(timer);
if (pendingRequests === 0) {
timer = setTimeout(() => {
resolve();
}, timeout);
}
}
checkRequests();
});
}
// 检查页面是否处于加载状态
function isPageLoading() {
return document.readyState !== 'complete';
}
// 检查元素是否可见
function isElementVisible(selector) {
const element = document.querySelector(selector);
if (!element) return false;
const style = window.getComputedStyle(element);
return style.display !== 'none' &&
style.visibility !== 'hidden' &&
style.opacity !== '0';
}
// 检查元素是否可交互
function isElementInteractive(selector) {
const element = document.querySelector(selector);
if (!element) return false;
return !element.disabled &&
!element.readonly &&
isElementVisible(selector);
}
|
评分
-
| 参与人数 1 | 荣誉 +1 |
收起
理由
|
 笨潴
| + 1 |
热心帮助他人，荣誉+1，希望继续努力(*^__^*) 嘻嘻! |
查看全部评分
|
[复制链接]
粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173
主题置顶卡
沉默卡
变色卡
扫一扫，关注易界动态