צילום תמונות עם סלניום WebDriver

1. סקירה כללית

כשעובדים עם בדיקות אוטומטיות באמצעות סלניום, לעתים קרובות אנו צריכים לצלם צילום מסך של דף אינטרנט או חלק מדף אינטרנט. זה יכול להיות שימושי, במיוחד כאשר ניפוי כשלים בבדיקות או אימות התנהגות היישום שלנו עקבית בדפדפנים שונים.

במדריך המהיר הזה, אנו נסתכל על כמה דרכים בהן אנו יכולים לצלם צילומי מסך באמצעות Selenium WebDriver ממבחני JUnit שלנו. למידע נוסף על בדיקות עם סלניום, עיין במדריך הנהדר שלנו לסלניום.

2. תלות ותצורה

נתחיל בהוספת תלות הסלניום שלנו pom.xml:

 org.seleniumhq.selenium selenium-java 3.141.59 

כמו תמיד, ניתן למצוא את הגרסה האחרונה של חפץ זה במייבן סנטרל.

עכשיו בואו להגדיר את מנהל ההתקן שלנו לשימוש ב- Chrome מבדיקת היחידה שלנו:

מנהל התקן ChromeDriver סטטי פרטי; @BeforeClass סטטי סטטי ציבורי ריק () {System.setProperty ("webdriver.chrome.driver", resolveResourcePath ("chromedriver.mac")); יכולות יכולות = DesiredCapabilities.chrome (); מנהל התקן = ChromeDriver חדש (יכולות); driver.manage (). timeouts (). ImplicitlyWait (5, TimeUnit.SECONDS); driver.get ("// www.google.com/"); }

כפי שאנו רואים, זוהי תצורת סלניום סטנדרטית למדי עבור ChromeDriver אשר יאפשר לנו לשלוט בדפדפן Chrome הפועל במחשב המקומי שלנו. אנו מגדירים גם את משך הזמן שעל הנהג להמתין בחיפוש אחר אלמנט בעמוד לחמש שניות.

לבסוף, לפני שאף אחד מהבדיקות שלנו פועל, אנו פותחים דף אינטרנט מועדף, www.google.com בחלון הדפדפן הנוכחי.

3. צלם צילום של האזור הניתן לצפייה

בדוגמה ראשונה זו, נסתכל על ה- TakesScreenShot ממשק, אשר סלניום מספק מחוץ לקופסה. כפי שהשם מרמז, אנו יכולים להשתמש בממשק זה לצילומי מסך של האזור הניתן לצפייה.

בואו ניצור שיטה פשוטה לצילומי מסך באמצעות ממשק זה:

חלל ציבורי takeScreenshot (שם מחרוזת) זורק את IOException {File src = ((TakesScreenshot) driver) .getScreenshotAs (OutputType.FILE); FileUtils.copyFile (src, קובץ חדש (שם נתיב)); } 

בשיטה תמציתית זו, אנו ממירים תחילה את הנהג שלנו ל- TakesScreenshot באמצעות צוות שחקנים. ואז נוכל להתקשר ל getScreenshotAs שיטה, עם המצוין OutputType כדי ליצור קובץ תמונה.

לאחר מכן, אנו יכולים להעתיק את הקובץ לכל מקום רצוי באמצעות IO של Apache Commons copyFile שיטה. די מגניב! בשתי שורות בלבד אנו מסוגלים לצלם צילומי מסך.

בואו נראה כיצד נוכל להשתמש בשיטה זו ממבחן יחידה:

@Test ציבורי בטל כאשר GoogleIsLoaded_thenCaptureScreenshot () זורק IOException {takeScreenshot (lossTestResourcePath ("google-home.png")); assertTrue (קובץ חדש (resolTestResourcePath ("google-home.png")). קיים ()); }

במבחן יחידה זה אנו שומרים את קובץ התמונה שהתקבל אצלנו מבחן / משאבים התיקייה באמצעות שם הקובץ google-home.png לפני שטוענת לראות אם הקובץ קיים.

4. לכידת אלמנט בעמוד

בחלק הבא הבא נבחן כיצד נוכל לצלם צילום מסך של אלמנט בודד בדף. לשם כך נשתמש בספריה בשם aShot, ספריית כלי צילום מסך הנתמכת באופן מקורי על ידי סלניום 3 ואילך.

מכיוון ש- aShot זמין מ Maven Central, אנחנו יכולים פשוט לכלול אותו ב- pom.xml:

 ru.yandex.qatools.ashot ashot 1.5.4 

ספריית aShot מספקת Fluent API להגדרת תצורה כיצד בדיוק אנו רוצים לצלם תמונות מסך.

בואו נראה כיצד נוכל ללכוד את הלוגו מדף הבית של גוגל מאחת ממבחני היחידות שלנו:

@Test ציבורי בטל כאשר GoogleIsLoaded_thenCaptureLogo () זורק IOException {לוגו WebElement = driver.findElement (By.id ("hplogo")); צילום מסך מסך = חדש AShot (). ShootingStrategy (ShootingStrategies.viewportPasting (1000)) .coordsProvider (WebDriverCoordsProvider חדש ()). TakeScreenshot (מנהל התקן, לוגו); ImageIO.write (screenshot.getImage (), "jpg", קובץ חדש (resolutionTestResourcePath ("google-logo.png"))); assertTrue (קובץ חדש (resolTestResourcePath ("google-logo.png")). קיים ()); }

אנו מתחילים במציאת a WebElement בדף באמצעות המזהה hplogo. ואז אנו יוצרים חדש ירייה למשל וקבע אחת מאסטרטגיות הירי המובנות - ShootingStrategies.viewportPasting (1000). אסטרטגיה זו תגלול את תצוגת התצוגה בזמן שאנחנו מצלמים את המסך לכל היותר שנייה אחת (1 אום).

עכשיו יש לנו את המדיניות לגבי האופן שבו אנו רוצים לקבוע את תצורת המסך שלנו.

כשאנחנו רוצים לתפוס אלמנט ספציפי בדף, באופן פנימי, aShot ימצא את הגודל והמיקום של האלמנט ויחתוך את התמונה המקורית. לשם כך אנו קוראים coordsProvider שיטה ולהעביר א WebDriverCoordsProvider בכיתה אשר תשתמש ב- API של WebDriver כדי למצוא קואורדינטות כלשהן.

שים לב, כברירת מחדל, aShot משתמש ב- jQuery לצורך רזולוציית קואורדינטות. אך יש נהגים שיש להם בעיות ב- Javascript.

עכשיו אנחנו יכולים לקרוא קח צילום מסך שיטה עוברת שלנו נהג ו סֵמֶל אלמנט אשר, בתורו, ייתן לנו צילום מסך אובייקט המכיל את התוצאה של לכידת המסך שלנו. כמו בעבר, אנו מסיימים את הבדיקה על ידי כתיבת קובץ תמונה ואימות קיומו.

5. מסקנה

במדריך מהיר זה ראינו שתי גישות לצילומי מסך באמצעות Selenium WebDriver.

בגישה הראשונה ראינו כיצד לתפוס את כל המסך באמצעות סלניום ישירות. ואז למדנו כיצד לתפוס אלמנט ספציפי בדף באמצעות ספריית שירות נהדרת בשם aShot.

אחד היתרונות העיקריים של השימוש ב- aShot הוא ש- WebDrivers שונים מתנהגים באופן שונה בעת צילום תמונות. השימוש ב- aShot ממצה אותנו ממורכבות זו ומעניק לנו תוצאות שקופות ללא קשר למנהל ההתקן בו אנו משתמשים. הקפד לבדוק את התיעוד המלא כדי לראות את כל התכונות הנתמכות הזמינות.

כמו תמיד, קוד המקור המלא של המאמר זמין באתר GitHub.


$config[zx-auto] not found$config[zx-overlay] not found