feature-image-css-selector-technique-selenium
feature-image-css-selector-technique-selenium

หลังกจากอ่านบทความเรื่องของ Selenium Best Practicse แล้ว เราก็คงเข้าใจกันแล้วว่า selector สําคัญมากกกกกกกกกกกกกกกก ในการทํา Automation เพราะว่ามันขึ้นผลกับ Performance ของระบบด้วย

ก่อนอื่นเลยเราเปิด cheat sheet ตัวนี้ไว้ตลอดเลยเวลาจะใช้งาน CSS Cheat Sheet ช่วยให้เราเลือกใช้ได้ง่ายมากๆเลย และ ก็จําไว้ว่าเราเขียน Automation Scripts Test เราไม่ได้เขียนไรที่มัน Dyanmics แบบ UI จะเปลี่ยนไปตลอด เพราะฉะนั้นไม่ต้องห่วงเรื่อง CSS เปลี่ยนไป แล้ว script เจ๊ง…. หลังจากเราสร้างขึ้นมาแล้ว

มันต้องเปลี่ยนสิ เพราะเราเขียนเพื่อเทสหน้านั้นๆ!!! เราก็ค่อยแก้ script automate เพื่อให้หน้านั้นมันทํางานได้ปกติ ใช้หลักการ

KISS (Keep it Simple Stupid)

ก่อนจะเริ่มเรียนรู้ CSS Selector เราควรจะรู้ก่อนว่าเราจะทดสอบมันยังไง

วิธีทดสอบไอเดียเราไม่ยากเลย คือแค่ใช้ Google Chrome Developer Console ขึ้นมา

  1. กด F12 ในหน้าที่ต้องการจะเทส
  2. กด Esc เพื่อเปิด console ขึ้นมาพิมย์
  3. พิมย์ $$(“CSS Selector ที่ต้องการจะหาลงไป”)

แค่นี้ก็จะสามารถใช้งานได้ละ ทดสอบ CSS Selector ได้สบายเลย

CSS Selector


$$("CSS here")

Xpath

$x("Xpath here")

Popular Attributes 

  • id
  • name
  • title
  • class

หลักๆเลยที่ทุกคนจะนึกถึงเมื่อเขียน css selector คือการหา attributes พวกนี้นั่นเอง


<input class="mystyle good" type="text" id="username" name="username" />

ทีนี้เวลาเราเรียกขึ้นมาใช้ด้วย css selector ก็ต้องมาดูว่ามันมี attribute อะไรให้ใช้บ้างมันจะออกมารูปแบบนี้ โดยจะระบุหรือไม่ระบชื่อ element ก่อน attribute ก็ได้

Noted: เราสามารถเรียกตรงๆได้เลยเช่น #username หรือ .username แบบนี้ แต่อยากให้ใส่กันเพราะเวลาเราอ่านจะสามารถเข้าใจได้ง่าย


input[id='username']

หรือ

input[name='username']

หรือ

input[class='mystyle good']

หรือ จะเอาให้ชัดเจนกว่านั้นคือ เอา input ที่มี id=username นี้และ name=username

input[id='username'][name='username']

หรือจะง่ายกว่านั้นใช้ตัวย่อสําหรับ id = # , class = .

input#username

input.mystyle.good.#username

Selector ยอดนิยม

selector ยอดนิยม ที่ทุกคนน่าจะรู้จักไว้ เพราะมันใช้งานได้ดีทีเดียวล่ะ

  1. element
    การเรียกชื่อ elem ตรงๆไปเลยเช่น p,div มันก็จะเอาทุก element ในหน้านั้นออกมาทั้งหมดเลย
  2. element, element
    เครื่องหมาย AND นั่นเอง เช่น p,div ก็คือจะเอา p และ div ทั้งหมดมาให้เรา
  3. element element
    เครื่องหมาย INSIDE คือเอาทุกตัวใต้ elem นั้นๆ เช่น div p ก็เอา p ทั้งหมด
  4. element > element
    เครื่องหมาย PARENT เอาทุกตัวที่อยู่ใต้ elem นั้น โดยเอาแบบตามลําดับเช่น div p span เราก็จะต้องใช้เป็น div > p > span เป็นต้น
  5. elemnet + element
    เครื่องหมาย PLACE เลือก elem ที่อยู่ต่อท้ายมันตัวแรก เช่น div + p จะแปลว่า เอา p ที่อยู่ต่อท้ายกับ div ตัวแรก
  6. element ~ element
    เครื่องหมาย PRECEDE แปลว่าเลือกเอา elem ที่อยู่ก่อนหน้ามันตัวแรก เช่น div ~ p มันก็จะเอา p ตัวแรกที่มาก่อนหน้ามันตัวแรกเลย

Comparison Operators

css เองก็มี comparison operators น่ะ คือไม่จําเป็นต้องใช้ = เท่ากับอย่างเดียว เราสามารถใช้ได้กระทั่ง

  1. Equals (=)
  2. Starts with (^=)
  3. End With ($=)
  4. Contains (*=)
  5. Contains in a List (~=)

แทนที่จะใช้ แค่ equal อย่างเดียวเราสามารถใช้พวก contains ก็ได้เช่น


input[id='username']

เปลี่ยนเป็น

input[id*='username']

Specific  Match

แต่พอลงมือทํางานจริงๆ เราจะรู้ว่าลึกๆจริงแล้ว มันต้องมีการเลื่อกแบบ specific elment ลงไปด้วยเลย

ซึ่ง CSS ก็มีวิธีการเลื่อกแบบนั้นอยู่ โดยการใช้วิธี Pseudo-Class ต่อไปนี้ (เอาเฉพาะตัวเด็ดๆน่ะ)

  1. :first-child
  2. :last-child
  3. :nth-child(n)
  4. :nth-of-type(n)
  5. :nth-last-of-type(n)
  6. :nth-last-child(n)

คือเวลาเราเลือกใช้ เราจําเป็นต้องเข้าใจถึงเรื่องการ Child, Sibling


<div>
 <h2>My name is Donald</h2>
 <p>I live in Duckburg.</p>
 <p>I live in Thailand.</p>
</div>
<div>
<span>
<p>I will not be styled.</p>
</span>
</div> 

ถ้าลองไล่อ่านดูดีๆจะเห็นว่า

  • Tag h2 และ p เป็น Child ของ Div ตัวแรก หรือเรียกอีกอย่างว่า div น่ะ เป็น Parent (พ่อแม่)
  • Tag ของ div ตัวที่สอง ถัดลงมาน่ะเป็น Sibling (พี่น้อง) ของ Div แรก

ถ้ายัง งง ดูจากนี้ได้เลย Css Combinator เป็นตัวอย่างที่ดีเลยล่ะ สําหรับ Child และ Sibling

คราวี้เราเลือกที่จะเรียก element ขึ้นมาโดยไม่ได้สนใจเรื่องของ attribute ของ element แล้ว โดยหลักๆที่จะใช้ก็มีอยู่ 2 ตัวคือ

  1. element a > element b
    • เลือก element b ทั้งหมดที่อยู่ในใต้ a หรือ เรียกง่ยๆคืออยู๋ใต้มันอะ เป็น parent-child ไป
  2. element a + element b
    • เลือก element  b ทั้งหมดที่มี a เป็น sibling หรือเรียกๆง่ายว่าๆ วางข้างๆกันน่ะ

ทีนี้กลับมาที่ Specific Match ของเรากัน

  1. :first-child
  2. :last-child
  3. :nth-child(n)
  4. :nth-last-child(n)
  5. :nth-of-type(n)
  6. :nth-last-of-type(n)

พวกนี้น่ะ จะเอามาใช้ในการเล่นของ element ที่เป็น child ของกันและกัน โดยจะเลือกว่า child ตัวแรกบ้าง ตัวสุดท้ายบ้าง หรือแม้แต่ เอาตัวเฉพาะของ child นั้นๆ จากล่างสุด หรือจากบนสุดก็ได้

nth-child(n)

เมื่อ n มีค่าเท่ากับตําแหน่งของ child ที่เราจะเลือก p เช่น


p:nth-child(2)
<div>
 <h2>My name is Donald</h2>
 <p>I live in Duckburg</p>
</pre>
<pre><p> I live in Thailand.</p>
</div>

หมายความว่า เลือก p ตัวที่ 2 ทั้งหมดของ parent ถ้าจากรูปแบบนี้ก็คือเราจะได้ I Live in Thailand มานั่นเอง

:nth-last-child(n)

เหมือน nth-last-child(n) เลย เพียงแต่ดึงจากล่างขึ้นบนแทน เช่นถ้า โค้ดเดิมเลย แล้วเราอยากได้ I live in Thailand เราก็ใช้ว่า :nth-last-child(1) มันก็จะดึงจากล่างขึ้นมานั้นเอง

nth-of-type(n)

หมายถึงการเลือก element โดยดูจาก type แทนที่จะดูจาก tag ผลลัพธ์ได้เหมือน nth-child เลย แต่ขึ้นอยู่กับการใช้งาน

nth-last-of-type(n)

เลือก element โดยดูจาก type แต่แทนที่จะเลือกจากด้านบน ให้เลือกจากท้ายสุดของ element ขึ้นมา

จริงๆ nth-* มันยังมีความลำ้ลึกมากกว่านี้อีกเยอะๆเลยล่ะ แต่เรารู้ basic ตรงนี้ไว้ก่อน แล้วไปต่อยอดเอา มันจะสนุกมากๆเลยล่ะ

แล้วสิบปากว่าก็ไม่เท่าตาเห็น เราลองมาดูตัวอย่างการใช้งานจริงๆจากที่นี้ดีกว่า css-tricks.com

สรุป

จากบทความทั้งหมดที่อ่าน จะเห็นเลยว่า CSS โคตรลั้าลึกมากกว่าที่เราใช้งานกันทั่วไปมากๆ ซึ่งในฐานะที่เป็น QA Engineer – Automation กัน เราก็ควรที่จะเข้าใจไว้ และนํามาใช้กับงานจริง เพราะอย่างที่เรารู้จากบทความนี้ว่า การใช้ Selector ที่ถูกเป็นหนึ่งใน Best Practise เลยล่ะ


image ref: smashingmagazine

ref app: css-tricks.com

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.