การกำหนดขนาดของ Browser Window ใน Capybara ทำยังไง? มาดูกัน

สวัสดีครับ! วันนี้เราจะมาพูดถึงเรื่องของการตั้งค่าเพื่อ "กำหนดขนาด" ของ Browser Window ใน Capybara กันนะครับ

โดยปกติแล้วเนี่ยการใช้งาน Capybara เพื่อเขียน system tests เพื่อนๆจะต้องสร้างไฟล์ที่มีชื่อว่า capybara.rb แล้วเอาไปวางไว้ในโฟลเดอร์ spec/support ใช่ไหมครับ ซึ่งเอาไว้สำหรับเป็นไฟล์ configuration ต่างๆให้กับ Capybara ได้นำไปใช้งาน และนี่คือตัวอย่างที่น้อยที่สุดที่ทำให้เราสามารถรันตัว system tests ได้

require 'capybara/rails'
require 'capybara/rspec'

แน่นอนในการใช้งานจริงมันไม่เพียงพอ เนื่องจาก Capybara ใช้ driver ในการเรียก browser เพื่อรัน system tests (ในความเข้าใจของผมนะ) ซึ่งโดย default แล้วเนี่ยตัว driver ที่ถูกตั้งค่ามาก็คือเจ้า RackTest นั่นเอง

แล้วเจ้า RackTest มันมีปัญหายังไงล่ะ?

Capybara สนับสนุน driver หลายตัวดังนี้ครับ

• RackTest
• Selenium
• Capybara-webkit
• Poltergeist

โดยตัว RackTest เป็น driver ที่มีข้อจำกัดมากที่สุดซึ่งหนึ่งในนั้นก็คือมันไม่สามารถรัน JavaScript ได้! เพราะฉะนั้น RackTest จึงไม่ใช่ทางเลือกที่ดี ทางเลือกที่ดีก็คือเราควรจะเอา Web application ที่เราจะเทสไปรันบน browser จริงๆมากกว่า ซึ่งตัวเลือกที่ง่ายและสะดวกที่สุดก็คือ Selenium driver นั่นเอง

สำหรับ Capybara-webkit และ Poltergeist ผมขอไม่พูดถึงต่อในบทความนี้นะครับ เนื่องจากผมยังไม่เคยได้เอามาทดลองใช้งานเลย ไว้มีโอกาสอาจจะมาเขียนต่อในบทความหน้านะครับ 😊

เอาล่ะคราวนี้ก่อนที่เราจะลงมือใช้งาน Selenium เราจำเป็นจะต้องติดตั้งเครื่องมือเหล่านี้ในเครื่องของเราก่อน

• geckodriver
• chromedriver

เนื่องจากผมใช้ Mac เป็นหลักในการทำงาน ดังนั้นผมจึงจะบอกวิธีการติดตั้งเจ้าสองตัวนี้เฉพาะบนเครื่อง Mac เท่านั้นนะครับ สำหรับ Linux และ Windows ขอให้เพื่อนๆผู้อ่านไปลอง search หาใน Google ดูเอานะครับ 😅

การติดตั้ง geckodriver และ chromedriver ให้เปิด Terminal แล้วพิมพ์คำสั่งตามนี้เลย (เพื่อนๆผู้อ่านจะต้องทำการติดตั้ง Homebrew ไว้ก่อนแล้วนะครับถึงจะสามารถใช้คำสั่ง brew ได้)

$ brew install geckodriver
$ brew cask install chromedriver

หลังจากที่ได้ทำการติดตั้งเสร็จเรียบร้อยแล้ว คราวนี้เราจะมาเปลี่ยนค่า default ของ driver ใน Capybara กันครับ โดย configuration ที่เพิ่มเข้ามาจะมีหน้าตาแบบนี้

require 'capybara/rails'
require 'capybara/rspec'

Capybara.default_driver = :selenium

หลังจากนั้นเพื่อนๆลองรัน system tests ดู ก็จะพบว่ามีการเปิด Firefox browser ขึ้นมาเพื่อรันเทสของเราเช่น การสั่งคลิกนั้น คลิกนี่ ซึ่งเราก็จะเห็นได้ในทันที ทำให้ง่ายต่อการ debug หรือ inspect element ต่างๆผ่านทาง browser ได้เลย

การใช้ :selenium นี้เหมาะมากเมื่อคุณต้องเขียนเทสไปด้วยรวมถึงการดีบั๊กไปด้วย แต่มันก็มีข้อเสียคือมันช้าและไม่เหมาะจะเอาไปใช้รันบน CI/CD

เพราะฉะนั้นเมื่อคุณเขียนเทสเสร็จแล้ว ย้ำว่าเสร็จแล้ว และคุณต้องการให้มันรันได้บน CI/CD คุณจำเป็นต้องเปลี่ยนค่าของ default driver ให้เป็น :selenium_chrome_headless

ซึ่งเจ้า :selenium_chrome_headless มีข้อแตกต่างคือมันรันเทสได้เร็วกว่า และไม่แสดง browser window ในขณะที่รันเทส

ในตอนที่ผมทำงานอยู่นั้นผมพบว่าถ้าเราไม่ได้กำหนดขนาดของ browser window ไว้ ตัว Capybara จะใช้ค่า default ที่เค้ากำหนดมาไว้แล้วมาใช้งาน และในตอนนั้นเองผมได้ทดลองเรียกคำสั่ง save_and_open_screenshot เพื่อดูว่า Web application ของผมถูก render ออกมาหน้าตายังไง

ผลปรากฏว่ามัน render ออกมาบน window size ขนาดกลางๆ จะเล็กขนาด mobile ก็ไม่ใช่ จะใหญ่ขนาด desktop ไหมก็ไม่เชิง เฉพาะฉะนั้นผมเลยต้องไปหาวิธีว่าเราจะตั้งค่าขนาดของ browser window ได้ยังไง?

และผมก็พบคำตอบว่า ผม search ใน google ไม่เจอ ในส่วนของ official document ก็เขียนไม่ค่อยละเอียดนัก ผมก็เลยต้องไปงมหาใน directory gem ของ Capybara สุดท้ายก็เจอเข้าจนได้ (copy แปะสิครับรออะไร อิอิ 😝)

โดยตัวค่า default ต่างๆของ Selenium driver ถูกเขียนไว้ในส่วนท้ายๆของไฟล์ lib/capybara.rb เพื่อนๆผู้อ่านสามารถเข้าไปดูได้นะครับ ซึ่งตัว Capybara ได้ทำการตั้งค่าหรือ register driver ของ :selenium_chrome_headless ไว้ดังนี้

Capybara.register_driver :selenium_chrome_headless do |app|
  browser_options = ::Selenium::WebDriver::Chrome::Options.new()
  browser_options.args << '--headless'
  browser_options.args << '--disable-gpu'

  Capybara::Selenium::Driver.new(app, browser: :chrome, options: browser_options)
end

คราวนี้เราต้องการกำหนดขนาดของ browser window เราก็แค่เพียงเพิ่มบรรทัดนี้เข้าไป

browser_options.args << '--window-size=<width>,<height>'

เราก็จะได้ขนาดของ browser window ตามที่ต้องการ โดยการแทนที่ <width> และ <height> ด้วยตัวเลขที่เราต้องการจะกำหนด

สำหรับใครที่ต้องการจะเอาไปรันบน CI/CD อย่างเช่น Jenkins เป็นต้น ให้เพิ่มบรรทัดนี้เข้าไปด้วยนะครับ

browser_options.args << '--no-sandbox'

สุดท้าย configuration ของเราจะมีหน้าตาแบบนี้ครับ

require 'capybara/rails'
require 'capybara/rspec'

Capybara.register_driver :selenium_chrome_headless do |app|
  browser_options = ::Selenium::WebDriver::Chrome::Options.new

  browser_options.args << '--headless'
  browser_options.args << '--disable-gpu'
  browser_options.args << '--window-size=1440,900'
  browser_options.args << '--no-sandbox'

  Capybara::Selenium::Driver.new(app, browser: :chrome, options: browser_options)
end

Capybara.default_driver = :selenium_chrome_headless

เป็นไงบ้างครับอารัมภบทมาซะยืดยาว จริงๆแล้วมันง่ายมาก ไม่มีอะไรเลย เพื่อนๆเปิดบทความมาเลื่อนมาล่างสุดก็อบไปแปะก็เสร็จและ 555+ 😅 สุดท้ายนี้ขอให้เพื่อนๆมีความสุขในการทำงานและการเขียนเทสนะครับ เจอกันบทความหน้า สวัสดีครับ 🙏