דוגמאות לבחירת סלניום CSS

איתור אלמנטים על ידי בוחרי CSS הוא הדרך המועדפת מכיוון שהיא מהירה וקריאה יותר מ- XPath.

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

בוחרי CSS לפי תכונה

בואו נדמיין שיש לנו תג עם התכונות הבאות [מזהה, מחלקה, שם, ערך]

הדרך הגנרית לאתר אלמנטים לפי תכונה היא:

css = element_name[='']

דוגמא:

WebElement firstName = driver.findElement(By.cssSelector('input[name='first_name']'));

תכונה מזהה

ב- CSS נוכל להשתמש ב # סימון לבחירת id תכונה של אלמנט:

דוגמא:

driver.findElement(By.cssSelector('input#firstname')); //or driver.findElement(By.cssSelector('#firstname'));

תכונת כיתה

ניתן להשתמש באותו עיקרון לאיתור אלמנטים לפי class תְכוּנָה.

אנו משתמשים ב- . סִמוּן.

driver.findElement(By.cssSelector('input.myForm')); //or driver.findElement(By.cssSelector('.myForm')); הערה:יש לנקוט משנה זהירות בעת השימוש ב- . סימון מכיוון שיכולים להיות הרבה אלמנטים ברשת במקור ה- HTML עם אותה תכונה class.

תכונות מרובות

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

ערך התצוגה יכול להיות 'ללא' או 'חסום' בהתאם לשיחת ה- Ajax. במצב זה עלינו לאתר את האלמנט לפי המעמד והסגנון.

דוגמא:

driver.findElement(By.cssSelector('div[class='ajax_enabled'] [style='display:block']'));

תכונה NOT מכילה ערך ספציפי

ב- WebDriver, איך מוצאים אלמנטים שהתכונה שלהם מכילה ערכים שאתה לא רוצה לבחור? דוגמה זו לבורר CSS מראה כיצד לא לבחור לפי ערך תכונה ספציפי

נניח שיש לך אלמנטים רבים שחולקים את אותה התכונה ואת ערך התכונה, אך לחלק מאותם אלמנטים משתנים אחרים המצורפים לערך. לְמָשָׁל:

בקטע הקוד שלמעלה, אנו רוצים לבחור יום זמין (כלומר שני האלמנטים האחרונים div)

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

בורר ה- CSS עבור אי בחירת שתי החילוקים הראשונים הוא

driver.findElement(By.cssSelector('div[class*=calendar-day-]:not([class*='unavailable'])'));'

איתור אלמנט ילד

כדי לאתר את תג התמונה, אנו משתמשים:

driver.findElement(By.cssSelector('div#logo img'));

אלמנטים מרובים של ילדים

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

• Apple


• Orange


• Banana

כפי שניתן לראות, לאלמנטים הרשימתיים הנפרדים אין שום מזהה. כדי לאתר את האלמנט עם הטקסט 'כתום', עלינו להשתמש nth-of-type.

דוגמא:

driver.findElement(By.cssSelector('ul#fruit li:nth-of-type(2)'));

כמו כן, כדי לבחור את אלמנט הילד האחרון, כלומר 'בננה', אנו משתמשים:

driver.findElement(By.cssSelector('ul#fruit li:last-child'));

מזהים שנוצרו באופן דינמי

אנו יכולים להשתמש בהתאמת מחרוזות כדי לאתר אלמנטים עם מזהים שנוצרו באופן דינמי.

בדוגמה זו, כל שלושת האלמנטים div מכילים את המילה 'אקראית'.

תכונה מתחילה עם

לבחירת הראשון div אלמנט, נשתמש ^= שפירושו 'מתחיל ב':

driver.findElement(By.cssSelector('div[id^='123']'));

תכונה מסתיימת עם

לבחירת השני div אלמנט, נשתמש $= שמשמעותו 'מסתיים ב':

driver.findElement(By.cssSelector('div[id$='456']'));

תכונה מכילה

לבחירת האחרון div אלמנט בו נשתמש *= שמשמעותו 'מחרוזת משנה'

driver.findElement(By.cssSelector('div[id*='_pattern_']'));

אנו יכולים גם להשתמש ב- contains

driver.findElement(By.cssSelector('div:contains('_pattern_')'));

לקריאה נוספת:

• מדריך סלניום: למד אוטומציה של דפדפן UI