การกำหนดขนาดของ Browser Window ใน Capybara ทำยังไง? มาดูกัน
Tags: ruby, testing, capybara, thai
Published: 2018-07-27 18:59:31

---
title: การกำหนดขนาดของ Browser Window ใน Capybara ทำยังไง? มาดูกัน
published: true
description: บทความว่าด้วยเรื่องของการกำหนดขนาด Browser Window ใน Capybara เมื่อใช้ :selenium_chrome_headless เป็น driver หลักในการใช้งาน
tags: ruby, testing, capybara, thai
---

สวัสดีครับ! วันนี้เราจะมาพูดถึงเรื่องของการตั้งค่าเพื่อ "**กำหนดขนาด**" ของ Browser Window ใน [Capybara](http://teamcapybara.github.io/capybara) กันนะครับ 

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

```ruby
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](https://brew.sh) ไว้ก่อนแล้วนะครับถึงจะสามารถใช้คำสั่ง `brew` ได้)

```shellscript
$ brew install geckodriver
$ brew cask install chromedriver
```

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

```ruby
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` ไว้ดังนี้

```ruby
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 เราก็แค่เพียงเพิ่มบรรทัดนี้เข้าไป 

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

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

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

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

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

```ruby
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+ 😅 สุดท้ายนี้ขอให้เพื่อนๆมีความสุขในการทำงานและการเขียนเทสนะครับ เจอกันบทความหน้า สวัสดีครับ 🙏