Problem/Motivation

The new JavascriptTestBase is quite hard to debug. We should add a method that allows developers to take screenshots with the actual viewport indicated. The default screenshot functionality of Behat\Mink\Session::getScreenshot() always shows the complete page, no matter the window size, and without and indication of the windows size / viewport.

This helper is powerful in combination with the isVisibleInViewport() method proposed in: #2729663: Fragment link pointing to <textarea> should be redirected to CKEditor instance when CKEditor replaced that textarea.

Proposed resolution

Add methods to draw a viewport overlay on the document and add a method to remove it again.

Re-adding should just move any existing overlay. So we never see multiple viewports, since that is also not supported in tests a.f.a.i.k.

Example screenshots (colors can be set as a parameter)


Remaining tasks

User interface changes

API changes

Data model changes

Comments

dmsmidt created an issue. See original summary.

dmsmidt’s picture

Issue summary: View changes
dmsmidt’s picture

Assigned: dmsmidt » Unassigned
Issue summary: View changes
Status: Active » Needs review
FileSize
3.19 KB
70.22 KB
67.4 KB

Add patch and screenshots.

dmsmidt’s picture

@todo, remove some whitespace and probably change the default color, because red might be confusing.

Status: Needs review » Needs work

The last submitted patch, 3: 2755873-03-js_test_viewport.patch, failed testing.

dmsmidt’s picture

  1. Changed default color to blue.
  2. Added a viewport size label option.
  3. Remove faulty isVisible() info.
dmsmidt’s picture

Dunno why CI Test failed in #3..

Patch #7: whitespace fix in heredoc.

Status: Needs review » Needs work

The last submitted patch, 7: 2755873-07-js_test_draw_viewport.patch, failed testing.

Lendude’s picture

Status: Needs work » Needs review

Looking good! Bit of nitpicking.

Remove faulty isVisible() info.

Why is this no longer relevant? Were we wrong about that not working?

  1. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JavascriptTestBase.php
    @@ -109,4 +109,81 @@ public function assertSession($name = NULL) {
    +   * Adds an overlay DOM element to the page of the size of the viewport.
    

    "with the same size as the viewport"

  2. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JavascriptTestBase.php
    @@ -109,4 +109,81 @@ public function assertSession($name = NULL) {
    +   * Earlier added overlays will be moved, so effectively only one viewport
    

    remove "effectively"

  3. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JavascriptTestBase.php
    @@ -109,4 +109,81 @@ public function assertSession($name = NULL) {
    +   *   Determines if a label with the viewport size is shown. Default to TRUE.
    

    Defaults

Test fails seem totally unrelated. Requeuing.

dmsmidt’s picture

Remove faulty isVisible() info. Why is this no longer relevant? Were we wrong about that not working?

Yes we where wrong, the test failed because if you take a screenshot the page scrolls up! Very confusing behaviour.
isVisible() even returns true if it is behind other elements..

Lendude’s picture

Status: Needs review » Needs work

Since we now have a method for making screenshot on the test class (see #2702661: Make it simple to take screenshots whilst using JavascriptTestBase), wouldn't it be great to add an overlay option to that? That would make this much more accessible I think.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.