Recorder.php 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. <?php
  2. namespace Codeception\Extension;
  3. use Codeception\Event\StepEvent;
  4. use Codeception\Event\TestEvent;
  5. use Codeception\Events;
  6. use Codeception\Exception\ExtensionException;
  7. use Codeception\Lib\Interfaces\ScreenshotSaver;
  8. use Codeception\Module\WebDriver;
  9. use Codeception\Step\Comment as CommentStep;
  10. use Codeception\Test\Descriptor;
  11. use Codeception\Util\FileSystem;
  12. use Codeception\Util\Template;
  13. /**
  14. * Saves screenshots of each step in acceptance tests and shows them as a slideshow.
  15. * Activated only for suites with WebDriver module enabled.
  16. *
  17. * ![recorder](http://codeception.com/images/recorder.gif)
  18. *
  19. * Slideshows saves are saved into `tests/_output/record_*` directories.
  20. * Open `index.html` to see the slideshow.
  21. *
  22. * #### Installation
  23. *
  24. * Add to list of enabled extensions
  25. *
  26. * ``` yaml
  27. * extensions:
  28. * enabled:
  29. * - Codeception\Extension\Recorder
  30. * ```
  31. *
  32. * #### Configuration
  33. *
  34. * * `delete_successful` (default: true) - delete records for successfully passed tests (log only failed and errored)
  35. * * `module` (default: WebDriver) - which module for screenshots to use. Set `AngularJS` if you want to use it with AngularJS module. Generally, module should implement `Codeception\Lib\Interfaces\ScreenshotSaver` interface.
  36. *
  37. *
  38. * #### Examples:
  39. *
  40. * ``` yaml
  41. * extensions:
  42. * enabled:
  43. * Codeception\Extension\Recorder:
  44. * module: AngularJS # enable for Angular
  45. * delete_successful: false # show successful reports
  46. * ```
  47. *
  48. */
  49. class Recorder extends \Codeception\Extension
  50. {
  51. protected $config = [
  52. 'delete_successful' => true,
  53. 'module' => 'WebDriver',
  54. 'template' => null,
  55. 'animate_slides' => true
  56. ];
  57. protected $template = <<<EOF
  58. <!DOCTYPE html>
  59. <html lang="en">
  60. <head>
  61. <meta charset="utf-8">
  62. <meta name="viewport" content="width=device-width, initial-scale=1">
  63. <title>Recorder Result</title>
  64. <!-- Bootstrap Core CSS -->
  65. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  66. <style>
  67. html,
  68. body {
  69. height: 100%;
  70. }
  71. .carousel,
  72. .item,
  73. .active {
  74. height: 100%;
  75. }
  76. .navbar {
  77. margin-bottom: 0px !important;
  78. }
  79. .carousel-caption {
  80. background: rgba(0,0,0,0.8);
  81. padding-bottom: 50px !important;
  82. }
  83. .carousel-caption.error {
  84. background: #c0392b !important;
  85. }
  86. .carousel-inner {
  87. height: 100%;
  88. }
  89. .fill {
  90. width: 100%;
  91. height: 100%;
  92. text-align: center;
  93. overflow-y: scroll;
  94. background-position: top;
  95. -webkit-background-size: cover;
  96. -moz-background-size: cover;
  97. background-size: cover;
  98. -o-background-size: cover;
  99. }
  100. </style>
  101. </head>
  102. <body>
  103. <!-- Navigation -->
  104. <nav class="navbar navbar-default" role="navigation">
  105. <div class="navbar-header">
  106. <a class="navbar-brand" href="#">{{feature}}
  107. <small>{{test}}</small>
  108. </a>
  109. </div>
  110. </nav>
  111. <header id="steps" class="carousel{{carousel_class}}">
  112. <!-- Indicators -->
  113. <ol class="carousel-indicators">
  114. {{indicators}}
  115. </ol>
  116. <!-- Wrapper for Slides -->
  117. <div class="carousel-inner">
  118. {{slides}}
  119. </div>
  120. <!-- Controls -->
  121. <a class="left carousel-control" href="#steps" data-slide="prev">
  122. <span class="icon-prev"></span>
  123. </a>
  124. <a class="right carousel-control" href="#steps" data-slide="next">
  125. <span class="icon-next"></span>
  126. </a>
  127. </header>
  128. <!-- jQuery -->
  129. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  130. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  131. <!-- Script to Activate the Carousel -->
  132. <script>
  133. $('.carousel').carousel({
  134. wrap: true,
  135. interval: false
  136. })
  137. $(document).bind('keyup', function(e) {
  138. if(e.keyCode==39){
  139. jQuery('a.carousel-control.right').trigger('click');
  140. }
  141. else if(e.keyCode==37){
  142. jQuery('a.carousel-control.left').trigger('click');
  143. }
  144. });
  145. </script>
  146. </body>
  147. </html>
  148. EOF;
  149. protected $indicatorTemplate = <<<EOF
  150. <li data-target="#steps" data-slide-to="{{step}}" {{isActive}}></li>
  151. EOF;
  152. protected $indexTemplate = <<<EOF
  153. <!DOCTYPE html>
  154. <html lang="en">
  155. <head>
  156. <meta charset="utf-8">
  157. <meta name="viewport" content="width=device-width, initial-scale=1">
  158. <title>Recorder Results Index</title>
  159. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  160. </head>
  161. <body>
  162. <!-- Navigation -->
  163. <nav class="navbar navbar-default" role="navigation">
  164. <div class="navbar-header">
  165. <a class="navbar-brand" href="#">Recorded Tests
  166. </a>
  167. </div>
  168. </nav>
  169. <div class="container">
  170. <h1>Record #{{seed}}</h1>
  171. <ul>
  172. {{records}}
  173. </ul>
  174. </div>
  175. </body>
  176. </html>
  177. EOF;
  178. protected $slidesTemplate = <<<EOF
  179. <div class="item {{isActive}}">
  180. <div class="fill">
  181. <img src="{{image}}">
  182. </div>
  183. <div class="carousel-caption {{isError}}">
  184. <h2>{{caption}}</h2>
  185. <small>scroll up and down to see the full page</small>
  186. </div>
  187. </div>
  188. EOF;
  189. public static $events = [
  190. Events::SUITE_BEFORE => 'beforeSuite',
  191. Events::SUITE_AFTER => 'afterSuite',
  192. Events::TEST_BEFORE => 'before',
  193. Events::TEST_ERROR => 'persist',
  194. Events::TEST_FAIL => 'persist',
  195. Events::TEST_SUCCESS => 'cleanup',
  196. Events::STEP_AFTER => 'afterStep',
  197. ];
  198. /**
  199. * @var WebDriver
  200. */
  201. protected $webDriverModule;
  202. protected $dir;
  203. protected $slides = [];
  204. protected $stepNum = 0;
  205. protected $seed;
  206. protected $recordedTests = [];
  207. public function beforeSuite()
  208. {
  209. $this->webDriverModule = null;
  210. if (!$this->hasModule($this->config['module'])) {
  211. $this->writeln("Recorder is disabled, no available modules");
  212. return;
  213. }
  214. $this->seed = uniqid();
  215. $this->webDriverModule = $this->getModule($this->config['module']);
  216. if (!$this->webDriverModule instanceof ScreenshotSaver) {
  217. throw new ExtensionException(
  218. $this,
  219. 'You should pass module which implements Codeception\Lib\Interfaces\ScreenshotSaver interface'
  220. );
  221. }
  222. $this->writeln(sprintf(
  223. "⏺ <bold>Recording</bold> ⏺ step-by-step screenshots will be saved to <info>%s</info>",
  224. codecept_output_dir()
  225. ));
  226. $this->writeln("Directory Format: <debug>record_{$this->seed}_{testname}</debug> ----");
  227. }
  228. public function afterSuite()
  229. {
  230. if (!$this->webDriverModule or !$this->dir) {
  231. return;
  232. }
  233. $links = '';
  234. foreach ($this->recordedTests as $link => $url) {
  235. $links .= "<li><a href='$url'>$link</a></li>\n";
  236. }
  237. $indexHTML = (new Template($this->indexTemplate))
  238. ->place('seed', $this->seed)
  239. ->place('records', $links)
  240. ->produce();
  241. file_put_contents(codecept_output_dir().'records.html', $indexHTML);
  242. $this->writeln("⏺ Records saved into: <info>file://" . codecept_output_dir().'records.html</info>');
  243. }
  244. public function before(TestEvent $e)
  245. {
  246. if (!$this->webDriverModule) {
  247. return;
  248. }
  249. $this->dir = null;
  250. $this->stepNum = 0;
  251. $this->slides = [];
  252. $testName = preg_replace('~\W~', '.', Descriptor::getTestAsString($e->getTest()));
  253. $this->dir = codecept_output_dir() . "record_{$this->seed}_$testName";
  254. @mkdir($this->dir);
  255. }
  256. public function cleanup(TestEvent $e)
  257. {
  258. if (!$this->webDriverModule or !$this->dir) {
  259. return;
  260. }
  261. if (!$this->config['delete_successful']) {
  262. $this->persist($e);
  263. return;
  264. }
  265. // deleting successfully executed tests
  266. FileSystem::deleteDir($this->dir);
  267. }
  268. public function persist(TestEvent $e)
  269. {
  270. if (!$this->webDriverModule or !$this->dir) {
  271. return;
  272. }
  273. $indicatorHtml = '';
  274. $slideHtml = '';
  275. foreach ($this->slides as $i => $step) {
  276. $indicatorHtml .= (new Template($this->indicatorTemplate))
  277. ->place('step', (int)$i)
  278. ->place('isActive', (int)$i ? '' : 'class="active"')
  279. ->produce();
  280. $slideHtml .= (new Template($this->slidesTemplate))
  281. ->place('image', $i)
  282. ->place('caption', $step->getHtml('#3498db'))
  283. ->place('isActive', (int)$i ? '' : 'active')
  284. ->place('isError', $step->hasFailed() ? 'error' : '')
  285. ->produce();
  286. }
  287. $html = (new Template($this->template))
  288. ->place('indicators', $indicatorHtml)
  289. ->place('slides', $slideHtml)
  290. ->place('feature', ucfirst($e->getTest()->getFeature()))
  291. ->place('test', Descriptor::getTestSignature($e->getTest()))
  292. ->place('carousel_class', $this->config['animate_slides'] ? ' slide' : '')
  293. ->produce();
  294. $indexFile = $this->dir . DIRECTORY_SEPARATOR . 'index.html';
  295. file_put_contents($indexFile, $html);
  296. $testName = Descriptor::getTestSignature($e->getTest()). ' - '.ucfirst($e->getTest()->getFeature());
  297. $this->recordedTests[$testName] = substr($indexFile, strlen(codecept_output_dir()));
  298. }
  299. public function afterStep(StepEvent $e)
  300. {
  301. if (!$this->webDriverModule or !$this->dir) {
  302. return;
  303. }
  304. if ($e->getStep() instanceof CommentStep) {
  305. return;
  306. }
  307. $filename = str_pad($this->stepNum, 3, "0", STR_PAD_LEFT) . '.png';
  308. $this->webDriverModule->_saveScreenshot($this->dir . DIRECTORY_SEPARATOR . $filename);
  309. $this->stepNum++;
  310. $this->slides[$filename] = $e->getStep();
  311. }
  312. }