Robot Framework[CSS Locating elements]

robot framework เป็น framework ตัวหนึ่งที่ใช้ในการทำ Automate Test วันนี้เราจะมาพูดถึง keyword ซึ่งถือเป็นส่วนสำคัญใน robot framework
keyword เปรียบได้กับคำสั่งของโปรแกรมที่ใช้สั่งว่าจะให้ทำอะไร มีสองส่วนคือ command และ Locating elements ซึ่งจะมีการคั่นระยะห่างระหว่างสองส่วนด้วย 2 spaces
Click Element id:fooClick Element คือ command ใช้สั่งให้โปรแกรมไป cick element ที่เราต้องการ
id: คือ Locating elements ส่วนที่บอกว่าให้ไป click ที่ element id ไหน
keyword ใน library ของมันเอง สามารถเข้าไปดูได้ที่
http://robotframework.org/SeleniumLibrary/SeleniumLibrary.html
ซึ่งแต่ละ keyword ต้องใช้ Locating elements เพื่อเป็นตัวบอกว่าเราต้องการให้ keyword นั้นทำงานกับ item ไหนในหน้าจอ หลักๆก็จะมีการใช้
- id คือเลือกที่ id นั้น
- name คือ เลือกที่ name ของ element นั้น
แต่วันนี้จะมาสอนอีกทางเลือกหนึ่งคือ css
โดยเราสามารถหา css ที่ต้องการของ element นั้นได้โดย
- Click ขวา element ที่ต้องการแล้วเลือก inspect

2.Click ขวา ส่วน Code ที่ hilight แล้วเลือก copy -> copy selector

3.กด ctrl+f หรือ command+f เพื่อเช็ค selector ที่ได้ว่าใช่ element ที่ต้องการหรือไม่

4.ย่อ selector ที่ได้ให้สั้นที่สุด แต่ต้องเช็คว่าที่ย่อได้นั้นเลือก element ตัวที่เราต้องการหรือไม่โดยไปที่ tab Console แล้วพิม $(‘#tsf input[type=”submit”]:nth-child(1)’) จะเห็นว่าได้ element ที่เลือกไว้

Click Element css:#tsf input[type=”submit”]:nth-child(1)ถือเป็นอีกทางเลือกหนึ่งที่ใช้ง่ายแล้วก็ทำให้ keyword เราไม่ดูยาวจนเกินไปแต่ต้องระวังตอนเลือกบางครั้งย่อแล้วอาจจะได้มากกว่า 1 element หรือบางทีอาจจะเจอ id ติดมาซึ่ง id บางครั้งจะเปลี่ยนไปทุกครั้งที่เปิดหน้าเว็บใหม่ ก่อน copy selector เราอาจจะลบ id นั้นออกใน source code ตรง tab elemen
ขอบคุณพี่ Chokchai Phatharamalai ที่ช่วยสอนเทคนิคของ robot framwork หลายเรื่องเลย นี่เป็นหนึ่งในหลายๆ เรื่องที่พี่จั๊วสอน เดี๋ยวเรื่องอื่นๆ จะทยอยตามมาค่ะ