refactoring
This commit is contained in:
@@ -0,0 +1,431 @@
|
||||
import type { Page } from 'playwright';
|
||||
import type { ILogger } from '../../../../application/ports/ILogger';
|
||||
import { IRACING_SELECTORS, BLOCKED_KEYWORDS } from './IRacingSelectors';
|
||||
import type { PlaywrightConfig } from '../core/PlaywrightAutomationAdapter';
|
||||
import { PlaywrightBrowserSession } from '../core/PlaywrightBrowserSession';
|
||||
|
||||
export class SafeClickService {
|
||||
constructor(
|
||||
private readonly config: Required<PlaywrightConfig>,
|
||||
private readonly browserSession: PlaywrightBrowserSession,
|
||||
private readonly logger?: ILogger,
|
||||
) {}
|
||||
|
||||
private log(level: 'debug' | 'info' | 'warn' | 'error', message: string, context?: Record<string, unknown>): void {
|
||||
if (!this.logger) {
|
||||
return;
|
||||
}
|
||||
const logger: any = this.logger;
|
||||
logger[level](message, context as any);
|
||||
}
|
||||
|
||||
private isRealMode(): boolean {
|
||||
return this.config.mode === 'real';
|
||||
}
|
||||
|
||||
private getPage(): Page {
|
||||
const page = this.browserSession.getPage();
|
||||
if (!page) {
|
||||
throw new Error('Browser not connected');
|
||||
}
|
||||
return page;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a selector or element text matches blocked patterns (checkout/payment buttons).
|
||||
* SAFETY CRITICAL: This prevents accidental purchases during automation.
|
||||
*
|
||||
* @param selector The CSS selector being clicked
|
||||
* @param elementText Optional text content of the element (should be direct text only)
|
||||
* @returns true if the selector/text matches a blocked pattern
|
||||
*/
|
||||
private isBlockedSelector(selector: string, elementText?: string): boolean {
|
||||
const selectorLower = selector.toLowerCase();
|
||||
const textLower = elementText?.toLowerCase().trim() ?? '';
|
||||
|
||||
// Check if selector contains any blocked keywords
|
||||
for (const keyword of BLOCKED_KEYWORDS) {
|
||||
if (selectorLower.includes(keyword) || textLower.includes(keyword)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Check for price indicators (e.g., "$0.50", "$19.99")
|
||||
// IMPORTANT: Only block if the price is combined with a checkout-related action word
|
||||
// This prevents false positives when price is merely displayed on the page
|
||||
const pricePattern = /\$\d+\.\d{2}/;
|
||||
const hasPrice = pricePattern.test(textLower) || pricePattern.test(selector);
|
||||
if (hasPrice) {
|
||||
// Only block if text also contains checkout-related words
|
||||
const checkoutActionWords = ['check', 'out', 'buy', 'purchase', 'pay', 'cart'];
|
||||
const hasCheckoutWord = checkoutActionWords.some(word => textLower.includes(word));
|
||||
if (hasCheckoutWord) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Check for cart icon class
|
||||
if (selectorLower.includes('icon-cart') || selectorLower.includes('cart-icon')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Verify an element is not a blocked checkout/payment button before clicking.
|
||||
* SAFETY CRITICAL: Throws error if element matches blocked patterns.
|
||||
*
|
||||
* This method checks:
|
||||
* 1. The selector string itself for blocked patterns
|
||||
* 2. The element's DIRECT text content (not children/siblings)
|
||||
* 3. The element's class, id, and href attributes for checkout indicators
|
||||
* 4. Whether the element matches any blocked CSS selectors
|
||||
*
|
||||
* @param selector The CSS selector of the element to verify
|
||||
* @throws Error if element is a blocked checkout/payment button
|
||||
*/
|
||||
async verifyNotBlockedElement(selector: string): Promise<void> {
|
||||
const page = this.browserSession.getPage();
|
||||
if (!page) return;
|
||||
|
||||
// In mock mode we bypass safety blocking to allow tests to exercise checkout flows
|
||||
// without risking real-world purchases. Safety checks remain active in 'real' mode.
|
||||
if (!this.isRealMode()) {
|
||||
this.log('debug', 'Mock mode detected - skipping checkout blocking checks', { selector });
|
||||
return;
|
||||
}
|
||||
|
||||
// First check the selector itself
|
||||
if (this.isBlockedSelector(selector)) {
|
||||
const errorMsg = `🚫 BLOCKED: Selector "${selector}" matches checkout/payment pattern. Automation stopped for safety.`;
|
||||
this.log('error', errorMsg);
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
|
||||
// Try to get the element's attributes and direct text for verification
|
||||
try {
|
||||
const element = page.locator(selector).first();
|
||||
const isVisible = await element.isVisible().catch(() => false);
|
||||
|
||||
if (isVisible) {
|
||||
// Get element attributes for checking
|
||||
const elementClass = (await element.getAttribute('class').catch(() => '')) ?? '';
|
||||
const elementId = (await element.getAttribute('id').catch(() => '')) ?? '';
|
||||
const elementHref = (await element.getAttribute('href').catch(() => '')) ?? '';
|
||||
|
||||
// Check class/id/href for checkout indicators
|
||||
const attributeText = `${elementClass} ${elementId} ${elementHref}`.toLowerCase();
|
||||
if (
|
||||
attributeText.includes('checkout') ||
|
||||
attributeText.includes('cart') ||
|
||||
attributeText.includes('purchase') ||
|
||||
attributeText.includes('payment')
|
||||
) {
|
||||
const errorMsg = `🚫 BLOCKED: Element attributes contain checkout pattern. Class="${elementClass}", ID="${elementId}", Href="${elementHref}". Automation stopped for safety.`;
|
||||
this.log('error', errorMsg);
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
|
||||
// Get ONLY the direct text of this element, excluding child element text
|
||||
// This prevents false positives when a checkout button exists elsewhere on the page
|
||||
const directText = await element
|
||||
.evaluate((el) => {
|
||||
let text = '';
|
||||
const childNodes = Array.from(el.childNodes);
|
||||
for (let i = 0; i < childNodes.length; i++) {
|
||||
const node = childNodes[i];
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
text += node.textContent || '';
|
||||
}
|
||||
}
|
||||
return text.trim();
|
||||
})
|
||||
.catch(() => '');
|
||||
|
||||
// Also get innerText as fallback (for buttons with icon + text structure)
|
||||
// But only check if directText is empty or very short
|
||||
let textToCheck = directText;
|
||||
if (directText.length < 3) {
|
||||
const innerText = await element.innerText().catch(() => '');
|
||||
if (innerText.length < 100) {
|
||||
textToCheck = innerText.trim();
|
||||
}
|
||||
}
|
||||
|
||||
this.log('debug', 'Checking element text for blocked patterns', {
|
||||
selector,
|
||||
directText,
|
||||
textToCheck,
|
||||
elementClass,
|
||||
});
|
||||
|
||||
if (textToCheck && this.isBlockedSelector('', textToCheck)) {
|
||||
const errorMsg = `🚫 BLOCKED: Element text "${textToCheck}" matches checkout/payment pattern. Automation stopped for safety.`;
|
||||
this.log('error', errorMsg);
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
|
||||
// Check if element matches any of the blocked selectors directly
|
||||
for (const blockedSelector of Object.values(IRACING_SELECTORS.BLOCKED_SELECTORS)) {
|
||||
const matchesBlocked = await element
|
||||
.evaluate((el, sel) => {
|
||||
try {
|
||||
return el.matches(sel) || el.closest(sel) !== null;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}, blockedSelector)
|
||||
.catch(() => false);
|
||||
|
||||
if (matchesBlocked) {
|
||||
const errorMsg = `🚫 BLOCKED: Element matches blocked selector "${blockedSelector}". Automation stopped for safety.`;
|
||||
this.log('error', errorMsg);
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.message.includes('BLOCKED')) {
|
||||
throw error;
|
||||
}
|
||||
this.log('debug', 'Could not verify element (may not exist yet)', { selector, error: String(error) });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss any visible Chakra UI modal popups that might block interactions.
|
||||
* This handles various modal dismiss patterns including close buttons and overlay clicks.
|
||||
* Optimized for speed - uses instant visibility checks and minimal waits.
|
||||
*/
|
||||
async dismissModals(): Promise<void> {
|
||||
const page = this.browserSession.getPage();
|
||||
if (!page) return;
|
||||
|
||||
try {
|
||||
const modalContainer = page.locator('.chakra-modal__content-container, .modal-content');
|
||||
const isModalVisible = await modalContainer.isVisible().catch(() => false);
|
||||
|
||||
if (!isModalVisible) {
|
||||
this.log('debug', 'No modal visible, continuing');
|
||||
return;
|
||||
}
|
||||
|
||||
this.log('info', 'Modal detected, dismissing immediately');
|
||||
|
||||
const dismissButton = page
|
||||
.locator(
|
||||
'.chakra-modal__content-container button[aria-label="Continue"], ' +
|
||||
'.chakra-modal__content-container button:has-text("Continue"), ' +
|
||||
'.chakra-modal__content-container button:has-text("Close"), ' +
|
||||
'.chakra-modal__content-container button:has-text("OK"), ' +
|
||||
'.chakra-modal__close-btn, ' +
|
||||
'[aria-label="Close"]',
|
||||
)
|
||||
.first();
|
||||
|
||||
if (await dismissButton.isVisible().catch(() => false)) {
|
||||
this.log('info', 'Clicking modal dismiss button');
|
||||
await dismissButton.click({ force: true, timeout: 1000 });
|
||||
await page.waitForTimeout(100);
|
||||
return;
|
||||
}
|
||||
|
||||
this.log('debug', 'No dismiss button found, skipping Escape to avoid closing wizard');
|
||||
await page.waitForTimeout(100);
|
||||
} catch (error) {
|
||||
this.log('debug', 'Modal dismiss error (non-critical)', { error: String(error) });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss any open React DateTime pickers (rdt component).
|
||||
* These pickers can intercept pointer events and block clicks on other elements.
|
||||
* Used specifically before navigating away from steps that have datetime pickers.
|
||||
*
|
||||
* IMPORTANT: Do NOT use Escape key as it closes the entire wizard modal in iRacing.
|
||||
*/
|
||||
async dismissDatetimePickers(): Promise<void> {
|
||||
const page = this.browserSession.getPage();
|
||||
if (!page) return;
|
||||
|
||||
try {
|
||||
const initialCount = await page.locator('.rdt.rdtOpen').count();
|
||||
|
||||
if (initialCount === 0) {
|
||||
this.log('debug', 'No datetime picker open');
|
||||
return;
|
||||
}
|
||||
|
||||
this.log('info', `Closing ${initialCount} open datetime picker(s)`);
|
||||
|
||||
// Strategy 1: remove rdtOpen class via JS
|
||||
await page.evaluate(() => {
|
||||
const openPickers = document.querySelectorAll('.rdt.rdtOpen');
|
||||
openPickers.forEach((picker) => {
|
||||
picker.classList.remove('rdtOpen');
|
||||
});
|
||||
const activeEl = document.activeElement as HTMLElement;
|
||||
if (activeEl && activeEl.blur && activeEl.closest('.rdt')) {
|
||||
activeEl.blur();
|
||||
}
|
||||
});
|
||||
await page.waitForTimeout(50);
|
||||
|
||||
let stillOpenCount = await page.locator('.rdt.rdtOpen').count();
|
||||
if (stillOpenCount === 0) {
|
||||
this.log('debug', 'Datetime pickers closed via JavaScript');
|
||||
return;
|
||||
}
|
||||
|
||||
// Strategy 2: click outside
|
||||
this.log('debug', `${stillOpenCount} picker(s) still open, clicking outside`);
|
||||
const modalBody = page.locator(IRACING_SELECTORS.wizard.modalContent).first();
|
||||
if (await modalBody.isVisible().catch(() => false)) {
|
||||
const cardHeader = page.locator(`${IRACING_SELECTORS.wizard.stepContainers.timeOfDay} .card-header`).first();
|
||||
if (await cardHeader.isVisible().catch(() => false)) {
|
||||
await cardHeader.click({ force: true, timeout: 1000 }).catch(() => {});
|
||||
await page.waitForTimeout(100);
|
||||
}
|
||||
}
|
||||
|
||||
stillOpenCount = await page.locator('.rdt.rdtOpen').count();
|
||||
if (stillOpenCount === 0) {
|
||||
this.log('debug', 'Datetime pickers closed via click outside');
|
||||
return;
|
||||
}
|
||||
|
||||
// Strategy 3: blur inputs and force-remove rdtOpen
|
||||
this.log('debug', `${stillOpenCount} picker(s) still open, force blur`);
|
||||
await page.evaluate(() => {
|
||||
const rdtInputs = document.querySelectorAll('.rdt input');
|
||||
rdtInputs.forEach((input) => {
|
||||
(input as HTMLElement).blur();
|
||||
});
|
||||
const openPickers = document.querySelectorAll('.rdt.rdtOpen');
|
||||
openPickers.forEach((picker) => {
|
||||
picker.classList.remove('rdtOpen');
|
||||
const pickerDropdown = picker.querySelector('.rdtPicker') as HTMLElement;
|
||||
if (pickerDropdown) {
|
||||
pickerDropdown.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
await page.waitForTimeout(50);
|
||||
|
||||
const finalCount = await page.locator('.rdt.rdtOpen').count();
|
||||
if (finalCount > 0) {
|
||||
this.log('warn', `Could not close ${finalCount} datetime picker(s), will attempt click with force`);
|
||||
} else {
|
||||
this.log('debug', 'Datetime picker dismiss complete');
|
||||
}
|
||||
} catch (error) {
|
||||
this.log('debug', 'Datetime picker dismiss error (non-critical)', { error: String(error) });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Safe click wrapper that handles modal interception errors with auto-retry.
|
||||
* If a click fails because a modal is intercepting pointer events, this method
|
||||
* will dismiss the modal and retry the click operation.
|
||||
*
|
||||
* SAFETY: Before any click, verifies the target is not a checkout/payment button.
|
||||
*
|
||||
* @param selector The CSS selector of the element to click
|
||||
* @param options Click options including timeout and force
|
||||
* @returns Promise that resolves when click succeeds or throws after max retries
|
||||
*/
|
||||
async safeClick(
|
||||
selector: string,
|
||||
options?: { timeout?: number; force?: boolean },
|
||||
): Promise<void> {
|
||||
const page = this.getPage();
|
||||
|
||||
// In mock mode, ensure mock fixtures are visible (remove 'hidden' flags)
|
||||
if (!this.isRealMode()) {
|
||||
try {
|
||||
await page.evaluate(() => {
|
||||
document
|
||||
.querySelectorAll<HTMLElement>('.wizard-step.hidden, .modal.hidden, .wizard-step[hidden]')
|
||||
.forEach((el) => {
|
||||
el.classList.remove('hidden');
|
||||
el.removeAttribute('hidden');
|
||||
});
|
||||
});
|
||||
} catch {
|
||||
// ignore any evaluation errors in test environments
|
||||
}
|
||||
}
|
||||
|
||||
// SAFETY CHECK: Verify this is not a checkout/payment button
|
||||
await this.verifyNotBlockedElement(selector);
|
||||
|
||||
const maxRetries = 3;
|
||||
const timeout = options?.timeout ?? this.config.timeout;
|
||||
|
||||
for (let attempt = 1; attempt <= maxRetries; attempt++) {
|
||||
try {
|
||||
const useForce = options?.force || attempt === maxRetries;
|
||||
await page.click(selector, { timeout, force: useForce });
|
||||
return;
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.message.includes('BLOCKED')) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
const errorMessage = String(error);
|
||||
|
||||
if (
|
||||
errorMessage.includes('intercepts pointer events') ||
|
||||
errorMessage.includes('chakra-modal') ||
|
||||
errorMessage.includes('chakra-portal') ||
|
||||
errorMessage.includes('rdtDay') ||
|
||||
errorMessage.includes('rdtPicker') ||
|
||||
errorMessage.includes('rdt')
|
||||
) {
|
||||
this.log('info', `Element intercepting click (attempt ${attempt}/${maxRetries}), dismissing...`, {
|
||||
selector,
|
||||
attempt,
|
||||
maxRetries,
|
||||
});
|
||||
|
||||
await this.dismissDatetimePickers();
|
||||
await this.dismissModals();
|
||||
await page.waitForTimeout(200);
|
||||
|
||||
if (attempt === maxRetries) {
|
||||
this.log('warn', 'Max retries reached, attempting JS click fallback', { selector });
|
||||
|
||||
try {
|
||||
const clicked = await page.evaluate((sel) => {
|
||||
try {
|
||||
const el = document.querySelector(sel) as HTMLElement | null;
|
||||
if (!el) return false;
|
||||
el.scrollIntoView({ block: 'center', inline: 'center' });
|
||||
el.click();
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}, selector);
|
||||
|
||||
if (clicked) {
|
||||
this.log('info', 'JS fallback click succeeded', { selector });
|
||||
return;
|
||||
} else {
|
||||
this.log('debug', 'JS fallback click did not find element or failed', { selector });
|
||||
}
|
||||
} catch (e) {
|
||||
this.log('debug', 'JS fallback click error', { selector, error: String(e) });
|
||||
}
|
||||
|
||||
this.log('error', 'Max retries reached, click still blocked', { selector });
|
||||
throw error;
|
||||
}
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user