{"id":71413,"date":"2020-01-10T11:30:30","date_gmt":"2020-01-10T06:00:30","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71413"},"modified":"2024-04-12T14:13:42","modified_gmt":"2024-04-12T08:43:42","slug":"javascript-testing","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/javascript-testing\/","title":{"rendered":"JavaScript Testing"},"content":{"rendered":"

Learning JavaScript Testing<\/strong><\/h1>\n

\"JavaScript<\/p>\n

Let’s start JavaScript Testing. By default, Capybara uses Rack::Test which is a headless browser emulator. It gives us great speed, but we sacrifice the ability to run JavaScript. If you need to test JS as part of your integration suite, then you need to use another driver.<\/p>\n

If you\u2019re using Linux, you\u2019ll need to set up xvfb in order to use either Selenium or Capybara-Webkit. Here are the Ubuntu commands to install xvfb and additional fonts to get rid of some warnings.<\/p>\n

sudo apt-get install xvfb<\/p>\n

sudo apt-get install x11-xkb-utils<\/p>\n

In addition, sudo apt-get install xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic<\/p>\n

In order to use xvfb with your specs, you will need to run xvfb-run bundle exec rake (an alias may be in order). Now selunium and capybara-webkit will use xvfb when launching a browser.<\/p>\n

Using Selenium: JavaScript Testing<\/strong><\/h2>\n

The most popular driver is Selenium. It uses an actual browser window and you can watch the test happen. It uses the browser\u2019s actual JavaScript engine, so it\u2019s identical to having a human Q\/A department interacting with your application.<\/p>\n

If you have Firefox 4 installed then there are no extra setup steps. It\u2019s possible to use Chrome or another WebKit-based browser, but it is more work.<\/p>\n

Modifying Your Examples<\/strong><\/p>\n

If you want to only use the browser for a few specific tests, you can add js: true into the it line like this<\/p>\n

it “should list the article titles on the index”, js: true do<\/p>\n

@articles.each do |article|<\/p>\n

page.should have_link(article.title)<\/p>\n

end<\/p>\n

end<\/p>\n

More commonly you\u2019ll have a group of tests that you want to run in the browser. Rather than litter js: true all over the place, do this:<\/p>\n