Escape double quotes to not break JavaScript commands (#71)

koehnlein · verdure-koehnlein · web-flow · commit a987fc88e23f · 2022-04-25T10:31:59.000+02:00
* Escape double quotes to not break JavaScript commands

* Add test for usage with different selectors, including single and double quotes

Co-authored-by: Albrecht Köhnlein &lt;albrecht.koehnlein@verdure.de&gt;
diff --git a/module/VisualCeption.php b/module/VisualCeption.php
@@ -325,6 +325,9 @@ private function getCoordinates($elementId)
     {
         if (is_null($elementId)) {
             $elementId = 'body';
+        } else {
+            // escape double quotes to not break JavaScript commands
+            $elementId = str_replace('"', '\\"', $elementId);
         }
 
         $elementExists = (bool)$this->webDriver->executeScript('return document.querySelectorAll( "' . $elementId . '" ).length > 0;');
diff --git a/test/integration/html/multipleAttributes.html b/test/integration/html/multipleAttributes.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Multiple Attributes</title>
+    <style>
+        .block {
+            height: 400px;
+            width: 400px;
+            background-color: aquamarine;
+        }
+    </style>
+</head>
+<body>
+Testing a div with multiple attribute selectors
+<div class="block" data-element="myElement">My div with multiple attributes</div>
+</body>
+</html>
diff --git a/test/integration/tests/_data/VisualCeption/MultipleAttributesCest.seeSameDivForMultipleSelectors.multipleAttributes.png b/test/integration/tests/_data/VisualCeption/MultipleAttributesCest.seeSameDivForMultipleSelectors.multipleAttributes.png
diff --git a/test/integration/tests/acceptance/MultipleAttributesCest.php b/test/integration/tests/acceptance/MultipleAttributesCest.php
@@ -0,0 +1,21 @@
+<?php
+
+class MultipleAttributesCest
+{
+
+    /**
+     * Comparing the same div with different attribute selectors
+     */
+    public function seeSameDivForMultipleSelectors(WebGuy $I, $scenario)
+    {
+        $I->amOnPage("/multipleAttributes.html");
+        // class selector
+        $I->dontSeeVisualChanges("multipleAttributes", ".block");
+        // attribute selector without value
+        $I->dontSeeVisualChanges("multipleAttributes", "[data-element]");
+        // attribute selector with single quotes
+        $I->dontSeeVisualChanges("multipleAttributes", "[data-element='myElement']");
+        // attribute selector with double quotes
+        $I->dontSeeVisualChanges("multipleAttributes", '[data-element="myElement"]');
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -325,6 +325,9 @@ private function getCoordinates($elementId)`
`325`	`325`	`{`
`326`	`326`	`if (is_null($elementId)) {`
`327`	`327`	`$elementId = 'body';`
	`328`	`+ } else {`
	`329`	`+ // escape double quotes to not break JavaScript commands`
	`330`	`+ $elementId = str_replace('"', '\\"', $elementId);`
`328`	`331`	`}`
`329`	`332`
`330`	`333`	`$elementExists = (bool)$this->webDriver->executeScript('return document.querySelectorAll( "' . $elementId . '" ).length > 0;');`