Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →एक बार के Playwright screenshot में popup या modal छिपाने के लिए page.screenshot() के style विकल्प में CSS दें। Visual snapshot assertion के लिए stylePath इस्तेमाल करें। अगर screenshot में ढका हुआ हिस्सा स्वीकार्य है, तो mask उसे रंगीन overlay से ढक सकता है। ये तरीके screenshot के नतीजे को बदलते हैं; page से element सचमुच हटाना या dialog को user की तरह बंद करना अलग काम है।
एक screenshot में popup को CSS से छिपाएं
Playwright के page.screenshot() में style विकल्प capture के समय stylesheet लागू करता है। उदाहरण में role="dialog" वाले element अदृश्य होंगे:
await page.screenshot({
path: 'page.png',
style: '[role="dialog"] { visibility: hidden !important; }',
});style screenshot के लिए है; यह page के DOM से dialog node हटाने का निर्देश नहीं है। Playwright के API reference के अनुसार screenshot-time stylesheet Shadow DOM और inner frames तक लागू होती है। यह विकल्प Playwright v1.41 में जोड़ा गया था। Page API
[role="dialog"] सिर्फ संभावित selector है, हर popup का नहीं। यदि site का modal यह role इस्तेमाल नहीं करता, तो वास्तविक DOM में मिले class या attribute का selector दें। एक site पर सही selector दूसरी site पर काम करेगा, इसकी गारंटी नहीं है।
#1 Best Overall
पूरा runnable उदाहरण
यह उदाहरण पहले page खोलता है, फिर popup छिपाकर screenshot सहेजता है। Playwright आपके project में स्थापित होना चाहिए और page.goto() में उस page का URL देना चाहिए जिसका screenshot लेना है।
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({
path: 'page.png',
fullPage: true,
style: '[role="dialog"] { visibility: hidden !important; }',
});
await browser.close();
})();fullPage: true पूरी scrollable page को एक लंबे viewport की तरह capture करता है। यह अपने आप popup नहीं हटाता; popup छिपाने के लिए style या नीचे दिया गया कोई दूसरा तरीका भी चाहिए। Playwright Screenshots
Rank #2
Visual snapshot को स्थिर रखने के लिए stylePath दें
Playwright Test में toHaveScreenshot() assertion के लिए CSS अलग file में रख सकते हैं। यह बदलने वाले content को screenshot comparison से बाहर रखने का documented तरीका है।
screenshot.cssनाम की file बनाकर उसमें उस page के popup का selector लिखें। उदाहरण के लिए:
[role="dialog"] {
visibility: hidden !important;
}- Test में
stylePathदेकर stylesheet को assertion से जोड़ें:
import { test, expect } from '@playwright/test';
test('page screenshot', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot({
stylePath: './screenshot.css',
});
});stylePath विकल्प भी v1.41 में जोड़ा गया था। CSS में वही site-specific selector होना चाहिए जो वास्तव में dialog से मेल खाता हो। Playwright visual comparisons
Recommended Free Tools
कौन-सा तरीका चुनें: CSS, mask या dismiss?
| तरीका | Screenshot में नतीजा | कब चुनें |
|---|---|---|
style या stylePath |
चुने हुए element को CSS के अनुसार छिपाता या बदलता है। | एक screenshot या visual snapshot में popup नहीं दिखाना हो। |
mask |
Locator के bounding box पर रंगीन overlay दिखाता है; element DOM से नहीं हटता। | Popup की जगह ढका हुआ रंगीन क्षेत्र स्वीकार्य हो। |
| Dismiss button पर click | Page की वास्तविक interaction से dialog बंद करने की कोशिश करता है। | Test का उद्देश्य user flow या dialog बंद करने का व्यवहार जाँचना हो। |
Popup को रंगीन overlay से ढकें
यदि popup का content दिखाना नहीं है, लेकिन screenshot में उसके स्थान पर overlay स्वीकार्य है, तो mask इस्तेमाल करें:
await page.screenshot({
path: 'page.png',
mask: [page.locator('[role="dialog"]')],
maskColor: '#000000',
});mask locator के bounding box को ढकता है; यह element को हटाता नहीं और न ही उसे CSS से अदृश्य करता है। डिफ़ॉल्ट mask रंग pink #FF00FF है; maskColor से दूसरा रंग दे सकते हैं। Page API: screenshot mask
Rank #4
- Used Book in Good Condition
अगर page की असली स्थिति बदलनी है तो dismiss button दबाएं
कुछ tests में सिर्फ साफ screenshot नहीं, बल्कि यह जाँचना होता है कि visitor dialog बंद कर सकता है। ऐसे में CSS से उसे छिपाने के बजाय accessible role और नाम से dismiss button खोजें। इससे test page के वास्तविक interaction के करीब रहता है।
const closeButton = page.getByRole('button', { name: 'Close' });
await closeButton.click();
await page.screenshot({ path: 'page.png' });Close को page पर दिखने वाले असली accessible नाम से बदलें। Button का नाम, role या dialog का markup हर site पर अलग हो सकता है। Playwright user-facing role locators को प्राथमिकता देता है; DOM structure पर निर्भर लंबे CSS या XPath selectors markup बदलने पर टूट सकते हैं। Playwright Locators
Best Value
आम दिक्कतें और उनके हल
- Popup फिर भी दिख रहा है: संभव है selector उस element से मेल न खाता हो, या popup का markup अलग हो। Page के वास्तविक DOM और accessibility markup के अनुसार selector बदलें।
- CSS एक site पर काम करता है, दूसरी पर नहीं: हर site के popup का markup समान नहीं होता। अपने screenshot stylesheet में site-विशिष्ट selector रखें।
- Visual test में popup बदलता रहता है: assertion में
stylePathसे उस volatile element को छिपाने की CSS दें। - Mask से popup गायब नहीं, रंगीन हिस्सा दिखता है: यह mask का अपेक्षित परिणाम है। यदि अदृश्य करना है तो
styleयाstylePathचुनें। - Full-page screenshot में भी popup दिख रहा है:
fullPage: trueकेवल capture का क्षेत्र बढ़ाता है। इसे CSS hiding, mask या dismiss action के साथ इस्तेमाल करें।
Or skip the browser setup
यदि आपको Playwright script के बजाय API से screenshot चाहिए, ScreenshotNeo एक GET request से screenshot या PDF देता है। नीचे का cURL उदाहरण PNG screenshot सहेजता है; YOUR_API_KEY को अपनी API key से बदलें। ScreenshotNeo API के code और विकल्पों के लिए दस्तावेज़ देखें।
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo capture से पहले cookie/consent banners स्वीकार और 60 से अधिक ज्ञात consent platforms, newsletter popups तथा chat widgets हटा सकता है; हर कदम बंद किया जा सकता है। Bot checks/CAPTCHAs, blank pages, timeouts, failed loads और cache hits के लिए शुल्क नहीं लगता, और response में X-Page-Verdict तथा X-Billed headers बताते हैं कि page का verdict और billing status क्या था। AI agents के लिए MCP server में take_screenshot, get_page_info और capture_pdf tools हैं। Free plan में बिना card के 1,000 screenshots प्रति माह हैं; paid plans $5 में 3,000 से शुरू होते हैं।
ScreenshotNeo पर मुफ़्त account बनाएं — 1,000 screenshots प्रति माह, बिना card के।
Frequently Asked Questions
क्या CSS छिपाने से modal page के DOM से हट जाता है?
नहीं। Screenshot-time CSS capture में element को अदृश्य करती है; DOM से node हटाना अलग क्रिया है।
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →क्या Playwright screenshot का style JavaScript alert या confirm को छिपा सकता है?
यहाँ दिए गए CSS तरीके HTML elements के लिए हैं। JavaScript के native alert, confirm और prompt HTML modal elements नहीं होते; इस मार्गदर्शन में उनके handling के लिए code शामिल नहीं है।
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
