Add step to verify element CSS properties #5586

vkepin · 2024-12-10T19:23:23Z

No description provided.

codecov · 2024-12-10T19:56:41Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.70%. Comparing base (7b21f68) to head (d6156f1).

Additional details and impacted files

@@             Coverage Diff              @@
##             master    #5586      +/-   ##
============================================
- Coverage     97.70%   97.70%   -0.01%     
- Complexity     7126     7395     +269     
============================================
  Files           987      992       +5     
  Lines         20669    20750      +81     
  Branches       1353     1353              
============================================
+ Hits          20195    20274      +79     
- Misses          363      364       +1     
- Partials        111      112       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

valfirst · 2024-12-11T10:23:43Z

docs/modules/plugins/partials/ui-element-css-property-steps.adoc

+
+[source,gherkin]
+----
+Then context element has CSS properties:$parameters


Suggested change

Then context element has CSS properties:$parameters

Then context element has CSS properties matching rules:$parameters

valfirst · 2024-12-11T10:23:55Z

docs/modules/plugins/partials/ui-element-css-property-steps.adoc

+----
+
+* `$parameters` - The xref:ROOT:glossary.adoc#_examplestable[ExamplesTable] containing the following columns:
+** [subs=+quotes]`*cssName*` - A name of the CSS property.


Suggested change

** [subs=+quotes]`*cssName*` - A name of the CSS property.

** [subs=+quotes]`*cssProperty*` - A name of the CSS property.

valfirst · 2024-12-11T10:24:29Z

vividus-extension-web-app/src/main/resources/templates/css_validation_result.ftl

+    <meta charset="utf-8">
+    <title>CSS properties validation results table</title>
+    <link rel="stylesheet" href="../../styles.css"/>
+    <link rel="stylesheet" href="../../webjars/bootstrap/3.4.1/css/bootstrap.min.css"/>


please use bootstrap 5 (it's also available in webjars)

valfirst · 2024-12-11T10:26:08Z

vividus-plugin-web-app/src/main/java/org/vividus/steps/ui/web/ElementCssSteps.java

+     * @param parameters The parameters of the expected CSS properties to set as ExamplesTable
+     */
+    @Then("context element has CSS properties:$parameters")
+    public void doesElementHasCssProperties(ExamplesTable parameters)


does it make sense to use POJO instead of ExamplesTable?

valfirst · 2024-12-11T10:26:57Z

vividus-tests/src/main/resources/story/integration/ElementCssStepsTests.story

@@ -0,0 +1,34 @@
+Description: Integration tests for ElementSteps class.


Suggested change

Description: Integration tests for ElementSteps class.

Description: Integration tests for features working with CSS properties.

valfirst · 2024-12-11T12:14:05Z

...lugin-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementSteps.java

+     *
+     * @param parameters The parameters of the expected CSS properties to set as ExamplesTable
+     */
+    @Then("context element has CSS properties:$parameters")


Also it makes sense to move this step ElementCssSteps class (to keep consistency with Selenium plugin)

uarlouski · 2024-12-11T12:21:32Z

docs/modules/plugins/partials/ui-element-css-property-steps.adoc

+[source,gherkin]
+----
+When I change context to element located by `id(block)`
+Then context element has CSS properties:


as practice shows steps that consume locator are more flexible, e.g. Then element located by ... has CSS properties..., if you need to check against context then you can just pass xpath(.) locator

doubtful at the current moment

uarlouski · 2024-12-11T12:30:23Z

...lugin-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementSteps.java

+     * @param parameters The parameters of the expected CSS properties to set as ExamplesTable
+     */
+    @Then("context element has CSS properties:$parameters")
+    public void doesElementHasCssProperties(ExamplesTable parameters)


does have :)

uarlouski · 2024-12-11T12:31:21Z

...lugin-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementSteps.java

+            StringComparisonRule comparisonRule = params.valueAs("comparisonRule", StringComparisonRule.class);
+
+            String actualCssValue = getCssValue(elementCss, cssName);
+            boolean passed = softAssert.assertThat(String.format(ELEMENT_CSS_CONTAINING_VALUE, cssName, expectedValue),


ELEMENT_CSS_CONTAINING_VALUE, its not only containing as you use comparison rule

uarlouski · 2024-12-11T12:42:14Z

vividus-plugin-web-app/src/main/java/org/vividus/steps/ui/web/ElementCssSteps.java

+            Map<String, String> values = params.values();
+            String cssName = values.get("cssName");
+            String expectedValue = values.get("expectedValue");
+            StringComparisonRule comparisonRule = params.valueAs("comparisonRule", StringComparisonRule.class);


does it make sense to map params directly to pojo having css name, exp val and comp rule?

valfirst · 2024-12-11T13:06:37Z

vividus-extension-web-app/src/main/java/org/vividus/steps/ui/web/CssValidationResult.java

+
+import org.vividus.steps.StringComparisonRule;
+
+public class CssValidationResult extends CssValidationParameters


use composition over inheritance

valfirst · 2024-12-12T08:17:24Z

docs/modules/plugins/partials/ui-element-css-property-steps.adoc

+
+[source,gherkin]
+----
+Then context element does have CSS properties matching rules:$parameters


why does have but not has?

valfirst · 2024-12-12T08:18:35Z

vividus-extension-web-app/src/main/resources/templates/css_validation_result.ftl

+    <table class="table table-hover table-bordered table-condensed fixedHeader">
+        <thead>
+            <tr>
+                <th>Css Property</th>


Suggested change

<th>Css Property</th>

<th>CSS Property</th>

valfirst · 2024-12-12T08:19:17Z

vividus-extension-web-app/src/main/resources/templates/css_validation_result.ftl

+                <th>Actual Value</th>
+                <th>Comparison Rule</th>
+                <th>Expected</th>
+                <th>Result</th>


the title for this column can be omitted and it makes sense to make this column first

valfirst · 2024-12-12T08:20:23Z

...in-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementCssSteps.java

+    public void doesElementHasCssProperties(List<CssValidationParameters> parameters)
+    {
+        String getAllCssScript =
+                org.vividus.util.ResourceUtils.loadResource("org/vividus/ui/web/get-element-computed-css-func.js");


just use import instead of fully-qualified name

valfirst · 2024-12-12T08:24:03Z

...in-web-app-playwright/src/main/java/org/vividus/ui/web/playwright/steps/ElementCssSteps.java

+            boolean passed = softAssert.assertThat(String.format("Element has CSS property '%s' %s value '%s'",
+                            cssName, comparisonRule, expectedValue),


Suggested change

boolean passed = softAssert.assertThat(String.format("Element has CSS property '%s' %s value '%s'",

cssName, comparisonRule, expectedValue),

boolean passed = softAssert.assertThat(String.format("CSS property '%s' value",

cssName),

valfirst · 2024-12-12T08:25:42Z

vividus-plugin-web-app/src/main/java/org/vividus/steps/ui/web/ElementCssSteps.java

+    private List<CssValidationResult> validateElementCss(List<CssValidationParameters> parameters,
+                                                         Map<String, String> elementCss)
+    {
+        List<CssValidationResult> cssResults = new ArrayList<>();
+        parameters.forEach(param ->
+        {
+            String cssName = param.getCssProperty();
+            String expectedValue = param.getExpectedValue();
+            StringComparisonRule comparisonRule = param.getComparisonRule();
+
+            String actualCssValue = getCssValue(elementCss, cssName);
+            boolean passed = softAssert.assertThat(String.format("Element has CSS property '%s' %s value '%s'",
+                            cssName, comparisonRule, expectedValue),
+                    actualCssValue, comparisonRule.createMatcher(expectedValue));
+            cssResults.add(new CssValidationResult(param, expectedValue, passed));
+        });
+        return cssResults;
+    }
+
+    private String getCssValue(Map<String, String> cssMap, String cssName)
+    {
+        return Optional.ofNullable(cssMap.get(cssName)).orElseGet(() -> {
+            String cssValueAsCamelCase = CaseUtils.toCamelCase(StringUtils.removeStart(cssName, '-'), false, '-');
+            return cssMap.get(cssValueAsCamelCase);
+        });
+    }


it makes sense to introduce CssValidations class, move this logic to it and re-use in both places

valfirst · 2024-12-16T13:11:40Z

vividus-tests/src/main/resources/story/integration/ElementCssStepsTests.story

+Meta:
+    @epic vividus-plugin-web-app
+
+Scenario: Deprecated step verification Then the context element has the CSS property '$cssName'='$cssValue'


please mark scenarios running on Playwright successfully with meta @playwrightSupported

vkepin force-pushed the check_css_step branch 2 times, most recently from 8ca7cdb to e6ac923 Compare December 10, 2024 19:30

vkepin marked this pull request as ready for review December 10, 2024 19:30

vkepin requested a review from a team as a code owner December 10, 2024 19:30

vkepin requested review from valfirst, ikalinin1 and uarlouski December 10, 2024 19:30

vkepin force-pushed the check_css_step branch 2 times, most recently from 489be47 to c36fc43 Compare December 10, 2024 19:50

valfirst requested changes Dec 11, 2024

View reviewed changes

valfirst reviewed Dec 11, 2024

View reviewed changes

uarlouski reviewed Dec 11, 2024

View reviewed changes

vkepin force-pushed the check_css_step branch from e3f93c6 to 8fa473a Compare December 11, 2024 12:52

valfirst reviewed Dec 11, 2024

View reviewed changes

valfirst requested changes Dec 12, 2024

View reviewed changes

Add step to verify element CSS properties

99357d4

vkepin force-pushed the check_css_step branch from 055e186 to 99357d4 Compare December 16, 2024 12:30

valfirst reviewed Dec 16, 2024

View reviewed changes

Update story

d6156f1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add step to verify element CSS properties #5586

Add step to verify element CSS properties #5586

vkepin commented Dec 10, 2024

codecov bot commented Dec 10, 2024 •

edited

Loading

valfirst Dec 11, 2024

valfirst Dec 11, 2024

valfirst Dec 11, 2024

valfirst Dec 11, 2024

valfirst Dec 11, 2024

valfirst Dec 11, 2024

vkepin Dec 11, 2024

uarlouski Dec 11, 2024

vkepin Dec 11, 2024

valfirst Dec 11, 2024

uarlouski Dec 11, 2024

vkepin Dec 11, 2024

vkepin Dec 11, 2024

uarlouski Dec 11, 2024

vkepin Dec 11, 2024

vkepin Dec 11, 2024

uarlouski Dec 11, 2024

vkepin Dec 11, 2024

valfirst Dec 11, 2024

vkepin Dec 11, 2024

valfirst Dec 12, 2024

valfirst Dec 12, 2024

valfirst Dec 12, 2024

valfirst Dec 12, 2024

valfirst Dec 12, 2024

valfirst Dec 12, 2024

valfirst Dec 16, 2024

	Then context element has CSS properties:$parameters
	Then context element has CSS properties matching rules:$parameters

	** [subs=+quotes]`cssName` - A name of the CSS property.
	** [subs=+quotes]`cssProperty` - A name of the CSS property.

		@@ -0,0 +1,34 @@
		Description: Integration tests for ElementSteps class.

	Description: Integration tests for ElementSteps class.
	Description: Integration tests for features working with CSS properties.


		import org.vividus.steps.StringComparisonRule;

		public class CssValidationResult extends CssValidationParameters

		boolean passed = softAssert.assertThat(String.format("Element has CSS property '%s' %s value '%s'",
		cssName, comparisonRule, expectedValue),

Add step to verify element CSS properties #5586

Are you sure you want to change the base?

Add step to verify element CSS properties #5586

Conversation

vkepin commented Dec 10, 2024

codecov bot commented Dec 10, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Dec 10, 2024 •

edited

Loading