Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Panther: test your Symfony apps with real web browsers

3,144 views

Published on

From a few lines of jQuery to modern React/Vue… PWA, Symfony apps always contain JavaScript code. Unfortunately, the SF functional test helper and the Goutte web scrapping lib aren’t able to execute JS code. It means that they cannot assert on client-side generated HTML, test if an element is visible or not, deal with alert boxes or detect if a bug occurs only with a specific browser.

Panther is a brand new e2e testing and web scrapping library written in PHP that drives real browsers thanks to the WebDriver protocol from the W3C. It implements the exact same API than the BrowserKit component. It means than existing SF tests and Goutte scripts work without modification… but this time JS will be executed! The tool also brings new capabilities including taking screenshots, or executing custom JS in the execution context of the web page. To install Panther you only have one command to run, and it doesn’t need any dependency to install Panther. Let’s meet the feline!

Published in: Software
  • Be the first to comment

Panther: test your Symfony apps with real web browsers

  1. 1. Les-Tilleuls.coop @dunglas Kévin Dunglas ❏ Les-Tilleuls.coop’s Founder ❏ Symfony Core Team ❏ API Platform creator @dunglas
  2. 2. Les-Tilleuls.coop @dunglas Les-Tilleuls.coop ❏ Self-managed company, since 2011 ❏ Entirely owned by the employees ❏ 30 people, 1,000% growth in 6 years! ❏ Hiring in Paris & London:
 jobs@les-tilleuls.coop
  3. 3. Les-Tilleuls.coop @dunglas A Very Simple Blog
  4. 4. Les-Tilleuls.coop @dunglas Install the Website Skeleton Symfony + Twig + Doctrine + common dev & debug tools
  5. 5. Les-Tilleuls.coop @dunglas Enable Bootstrap
  6. 6. Les-Tilleuls.coop @dunglas Testing a Symfony App
  7. 7. Les-Tilleuls.coop @dunglas
  8. 8. Les-Tilleuls.coop @dunglas 3 Components to Emulate a Browser
  9. 9. Les-Tilleuls.coop @dunglas
  10. 10. Les-Tilleuls.coop @dunglas A Web Scraping Library
  11. 11. Les-Tilleuls.coop @dunglas A Functional Test
  12. 12. Les-Tilleuls.coop @dunglas Generate a Test Skeleton
  13. 13. Les-Tilleuls.coop @dunglas
  14. 14. Les-Tilleuls.coop @dunglas Run the Test
  15. 15. Les-Tilleuls.coop @dunglas Functional Tests in Symfony ❏ KernelTestcase: ❏ Extends PHPUnit’s TestCase ❏ boots the Symfony app ❏ WebTestCase: ❏ extends KernelTestcase ❏ uses BrowserKit (that uses DomCrawler and CssSelector) ❏ creates HTTP Foundation’s Request and allows to inspect Response through a clean API
  16. 16. Les-Tilleuls.coop @dunglas WebTestCase is elegant, developer-friendly and fast,
 but what if: ❏ something is hidden by a faulty CSS rule ❏ a JS error prevents the page to load ❏ the browser blocks the form (XSS detection…) ?
  17. 17. Les-Tilleuls.coop @dunglas You’ll never know!
  18. 18. Les-Tilleuls.coop @dunglas And what if you rely on: ? Symfony Encore +
  19. 19. You can’t test it!
  20. 20. Les-Tilleuls.coop @dunglas Why? Because BowserKit doesn’t support JavaScriptnor CSS
  21. 21. Les-Tilleuls.coop @dunglas Introducing Symfony Panther 😺
  22. 22. Les-Tilleuls.coop @dunglas Panther, in a few words ❏ Executes real web browsers ❏ So, same features than browsers including JS and CSS ❏ Implements BrowserKit’s API ❏ Built on top of Facebook’s PHP WebDriver and the WebDriver Protocol, implements PHP WebDriver’s API ❏ Provide convenient methods for JS testing: ❏ wait, execute script, screenshot… ❏ Standalone lib, for testing and web scraping
  23. 23. Les-Tilleuls.coop @dunglas Guess what? You already master Panther!
  24. 24. Les-Tilleuls.coop @dunglas
  25. 25. Les-Tilleuls.coop @dunglas Run the Test
  26. 26. Les-Tilleuls.coop @dunglas Drop-in replacement for existing WebTestCase tests and Gouttescripts
  27. 27. Les-Tilleuls.coop @dunglas Choose your Weapon 🔪 🔫 💣
  28. 28. Les-Tilleuls.coop @dunglas Extra Capabilities %
  29. 29. Les-Tilleuls.coop @dunglas Access your Services
  30. 30. Les-Tilleuls.coop @dunglas Easy to use, Developer-friendly ❏ Nothing to install ❏ Nothing to configure ❏ neither Selenium, ❏ nor a web server ❏ Panther just works!
  31. 31. Les-Tilleuls.coop @dunglas You only Believe What you See?
  32. 32. Les-Tilleuls.coop @dunglas How Does it Work?
  33. 33. Les-Tilleuls.coop @dunglas ChromeDriver ❏ Panther is shipped with ChromeDriver binaries ❏ It’s a standalone server, exposing
 a Selenium/W3C compliant WebDriver API ❏ It automatically finds the local Chrome install ❏ It can start Chrome in headless mode!
  34. 34. Les-Tilleuls.coop @dunglas Panther Supports Any WebDriver API ❏ ChromeDriver is not mandatory ❏ Experimental support for Geckodriver
 (same as ChromeDriver, but for Firefox) ❏ Compatible with the Selenium server and Selenium Grid ❏ Compatible with remote testing services such as:
  35. 35. Les-Tilleuls.coop @dunglas The Builtin Web Server ❏ Panther transparently serves your project using the builtin PHP web server ❏ it finds the PHP binary ❏ it finds the document root (public/ with Flex) ❏ it starts the project in test environment ❏ Yes, it works even on Windows!
  36. 36. Les-Tilleuls.coop @dunglas Panther Can Work with Any Web Server ❏ You use Docker, or Vagrant? ❏ Panther has got you covered ❏ You can configure the URL to use… ❏ …and disable the builtin web server!
  37. 37. Les-Tilleuls.coop @dunglas Continuous Integration
  38. 38. Les-Tilleuls.coop @dunglas Panther Is Compatible With: ❏ Travis CI ❏ AppVeyor (Windows) ❏ Docker (GitLab CI, Circle CI, custom…) ❏ SauceLabs, BrowserStack and other browser testing services
  39. 39. Les-Tilleuls.coop @dunglas Travis
  40. 40. Les-Tilleuls.coop @dunglas Docker
  41. 41. Les-Tilleuls.coop @dunglas Test Environment
  42. 42. Les-Tilleuls.coop @dunglas Config and Environment Variables The builtin web server inherits from env vars set in the current context:
  43. 43. Les-Tilleuls.coop @dunglas We’re trying to make this easier, and you can help us:
  44. 44. Les-Tilleuls.coop @dunglas Database Testing and Fixtures
  45. 45. Les-Tilleuls.coop @dunglas Introducing AliceBundle,
 Panther & WebTestCase’s new best friend
  46. 46. Les-Tilleuls.coop @dunglas Install AliceBundle
  47. 47. Les-Tilleuls.coop @dunglas AliceBundle: What’s Inside? ❏ Faker: pseudo-random data generator ❏ Alice: an expressive syntax on top of Faker ❏ Symfony integration (new: Flex integration) ❏ Support for Doctrine ORM, ODM and Eloquent ❏ New: DB testing helpers (inspired by Laravel)
  48. 48. Les-Tilleuls.coop @dunglas Describe the Data you Want
  49. 49. Les-Tilleuls.coop @dunglas Purge the DB and Load Fixtures before every test:
  50. 50. Les-Tilleuls.coop @dunglas Faster Panther Tests
  51. 51. Les-Tilleuls.coop @dunglas Starts and stops the web server for every test suite, instead of every test class. Contributed by @Pierstoval (symfony/panther#30)
  52. 52. Les-Tilleuls.coop @dunglas github.com/symfony/panther Available right now! Thanks! Any question?

×