Added Integration pages for Percy and App Percy for WDIO #12538

KhushbuRander · 2024-03-21T11:16:29Z

Proposed changes

Types of changes

Polish (an improvement for an existing feature)
Bugfix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation update (improvements to the project's docs)
Specification changes (updates to WebDriver command specifications)
Internal updates (everything related to internal scripts, governance documentation and CI files)

Checklist

I have read the CONTRIBUTING doc
I have added tests that prove my fix is effective or that my feature works
I have added the necessary documentation (if appropriate)
I have added proper type definitions for new commands (if appropriate)

Backport Request

//: # (The current main branch is the development branch for WebdriverIO v9. If your change should be released to the current major version of WebdriverIO (v8), please raise another PR with the same changes against the v8 branch.)

This change is solely for v9 and doesn't need to be back-ported
Back-ported PR at #XXXXX

Further comments

Reviewers: @webdriverio/project-committers

linux-foundation-easycla · 2024-03-21T11:16:34Z

The committers listed above are authorized under a signed CLA.

✅ login: KhushbuRander (63c6b10, eb4fc1f, 41267ba, abe787b, 0e8bc47, 8516ed3, d54447b, 23de329, 8403b0b, f36d703, 4c46023, b247140)
✅ login: christian-bromann / name: Christian Bromann (eae36d8, c6a13e9, 325be12, 51f62e7)

christian-bromann

Taking a first pass on this.

christian-bromann · 2024-03-21T20:53:50Z

website/_sidebars.json

+        "visual-testing/integrate-with-percy",
+        "visual-testing/integrate-with-app-percy"


Can we have Percy integration as its own category?

Suggested change

"visual-testing/integrate-with-percy",

"visual-testing/integrate-with-app-percy"

{

"type": "category",

"label": "Integrate with Percy",

"items": [

"visual-testing/integrate-with-percy",

"visual-testing/integrate-with-app-percy"

]

},

BrowserStack's Percy and App Percy are two distinct products that fall under the larger Visual Testing space/domain. Percy is for visually testing web apps, whereas App Percy is for testing mobile apps. So, we would like this content to reside under the Visual Testing category.

This suggestion will keep Percy under the visual testing section, however I would like to have all related Percy content within a single category. We could call it:

Integrate with Percy

for web environments

for mobile apps

something along these lines. People are rather focused on the use case and not the branding itself and as of now these documents don't provide a clear differentiation.

christian-bromann · 2024-03-21T20:56:05Z

website/docs/visual-testing/integrate-with-percy.md

+The following example uses the percySnapshot() function in the async mode:
+
+```sh
+const percySnapshot = require('@percy/webdriverio');


Let's use ESM syntax here to stay consistent with the other examples on the docs. Feel free to have a code example with ESM and CJS as long as ESM is the default selection

Incorporated comment.

christian-bromann · 2024-03-21T20:56:41Z

website/docs/visual-testing/integrate-with-percy.md

+```sh
+const { remote } = require('webdriverio');
+const percySnapshot = require('@percy/webdriverio');
+(async () => {


Same here, the ESM version should not require an IIFE as root level await is supported

Incorporated comment

christian-bromann · 2024-03-21T20:59:34Z

website/docs/visual-testing/integrate-with-app-percy.md

@@ -0,0 +1,111 @@
+---
+id: integrate-with-app-percy
+title: Integrate with App Percy


How is this document different from the other. I've never used Percy so both docs seem to describe the same thing to me just slightly different. Can we make sure to give the documents better names that clarify the differentiation.

Thanks for asking. BrowserStack's Percy and App Percy are two distinct products that fall under the larger Visual Testing space/domain. If you want to compare visual differences between different versions/builds of your web app (on desktop and mobile browsers), you would use Percy.

If you want to compare visual differences between different versions of your mobile apps, then you should choose App Percy.

The similarities are because they both are visual testing platforms.

Hope this clarifies.

Changed the titles:
For Percy: Run visual tests on your web apps with Percy
For App Percy: Run visual tests on your mobile apps with App Percy

Can we please make this very clear in the documents? I suggested above even a better title for the page, e.g. for web environments vs for mobile applications.

website/docs/visual-testing/integrate-with-app-percy.md

Co-authored-by: Christian Bromann <git@bromann.dev>

christian-bromann · 2024-03-22T15:28:43Z

website/docs/visual-testing/integrate-with-app-percy.md

+WebdriverIO supports cross-browser visual testing natively using App Percy. You can use App Percy for visual testing of native mobile applications.
+The benefits of utilizing App Percy for visual testing include the following:
+
+- Consistency: Promotes consistent user experience by identifying visual discrepancies early in the development process.
+- Efficiency: Improves efficiency by reducing the time and effort required to manually spot visual regressions.
+- Integrations: Percy integrates with popular tools and services like GitHub, GitLab, Bitbucket, and more.
+- Collaboration: Improves collaboration between developers, designers, and QA teams by providing a visual representation of changes.
+- Prevent regression: Prevents you from experiencing unintended visual regressions.
+
+## How does Percy work?
+
+Percy compares new snapshots against relevant baselines to detect visual changes. Percy manages baseline selection across branches so your tests are always relevant. If visual changes are detected, Percy highlights and groups the resulting diffs for you to review.


This whole section is almost 1:1 the same to the other document. Let's maybe have a general page for Percy and then create 2 documents going into the specifics of using Percy for web environments and one for mobile applications

Done. I have incorporated the suggested comments.

christian-bromann · 2024-03-22T15:31:07Z

website/docs/visual-testing/integrate-with-percy.md

@@ -0,0 +1,144 @@
+---
+id: integrate-with-percy
+title: Run visual tests on your web apps with Percy


instead of:

Run visual tests on your web apps with Percy Run visual tests on your mobile apps with App Percy

Let's organize the content as:

Integrate with Percy - For Web Apps - For Mobile Apps

Done. I have incorporated the suggested comments.

…erio

christian-bromann

Some minor formatting issues which I will go ahead and merge, the rest looks good to me 👍 Thanks a lot!

website/docs/visual-testing/integrate-with-app-percy.md

website/docs/visual-testing/integrate-with-percy.md

christian-bromann · 2024-03-27T17:34:43Z

@KhushbuRander I will manually backport this patcht to v8 and publish the docs. No action needed from your side. Thanks again.

* cc * c * Percy changes * Percy changes-1 * Update website/docs/visual-testing/integrate-with-app-percy.md Co-authored-by: Christian Bromann <git@bromann.dev> * Comment fixes * Update integrate-with-app-percy.md * Update integrate-with-percy.md * Update integrate-with-app-percy.md * Update integrate-with-percy.md * Added Percy overview page * Update website/docs/visual-testing/integrate-with-app-percy.md * Update website/docs/visual-testing/integrate-with-percy.md * Update website/docs/visual-testing/integrate-with-percy.md * Update website/docs/visual-testing/integrate-with-percy.md --------- Co-authored-by: Christian Bromann <git@bromann.dev>

…#12538) * cc * c * Percy changes * Percy changes-1 * Update website/docs/visual-testing/integrate-with-app-percy.md Co-authored-by: Christian Bromann <git@bromann.dev> * Comment fixes * Update integrate-with-app-percy.md * Update integrate-with-percy.md * Update integrate-with-app-percy.md * Update integrate-with-percy.md * Added Percy overview page * Update website/docs/visual-testing/integrate-with-app-percy.md * Update website/docs/visual-testing/integrate-with-percy.md * Update website/docs/visual-testing/integrate-with-percy.md * Update website/docs/visual-testing/integrate-with-percy.md --------- Co-authored-by: Christian Bromann <git@bromann.dev>

KhushbuRander added 4 commits March 21, 2024 16:08

cc

41267ba

c

abe787b

Percy changes

d54447b

Percy changes-1

23de329

christian-bromann requested changes Mar 21, 2024

View reviewed changes

KhushbuRander and others added 6 commits March 22, 2024 20:10

Update website/docs/visual-testing/integrate-with-app-percy.md

63c6b10

Co-authored-by: Christian Bromann <git@bromann.dev>

Comment fixes

eb4fc1f

Update integrate-with-app-percy.md

b247140

Update integrate-with-percy.md

4c46023

Update integrate-with-app-percy.md

8403b0b

Update integrate-with-percy.md

8516ed3

christian-bromann reviewed Mar 22, 2024

View reviewed changes

KhushbuRander added 2 commits March 26, 2024 18:15

Merge branch 'main' of https://github.com/KhushbuRander/Percy-webdriv…

f36d703

…erio

Added Percy overview page

0e8bc47

christian-bromann approved these changes Mar 27, 2024

View reviewed changes

christian-bromann added 4 commits March 27, 2024 10:33

Update website/docs/visual-testing/integrate-with-app-percy.md

eae36d8

Update website/docs/visual-testing/integrate-with-percy.md

51f62e7

Update website/docs/visual-testing/integrate-with-percy.md

c6a13e9

Update website/docs/visual-testing/integrate-with-percy.md

325be12

christian-bromann added the PR: Docs 📝 PRs that contain changes to the documentation label Mar 27, 2024

christian-bromann merged commit 0a9ad84 into webdriverio:main Mar 27, 2024
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Integration pages for Percy and App Percy for WDIO #12538

Added Integration pages for Percy and App Percy for WDIO #12538

KhushbuRander commented Mar 21, 2024 •

edited

linux-foundation-easycla bot commented Mar 21, 2024 •

edited

christian-bromann left a comment

christian-bromann Mar 21, 2024

KhushbuRander Mar 22, 2024

christian-bromann Mar 22, 2024

christian-bromann Mar 21, 2024

KhushbuRander Mar 22, 2024

christian-bromann Mar 21, 2024

KhushbuRander Mar 22, 2024

christian-bromann Mar 21, 2024

KhushbuRander Mar 22, 2024

KhushbuRander Mar 22, 2024

christian-bromann Mar 22, 2024

christian-bromann Mar 22, 2024

KhushbuRander Mar 27, 2024

christian-bromann Mar 22, 2024

KhushbuRander Mar 27, 2024

christian-bromann left a comment

christian-bromann commented Mar 27, 2024

		"visual-testing/integrate-with-percy",
		"visual-testing/integrate-with-app-percy"

Added Integration pages for Percy and App Percy for WDIO #12538

Added Integration pages for Percy and App Percy for WDIO #12538

Conversation

KhushbuRander commented Mar 21, 2024 • edited

Proposed changes

Types of changes

Checklist

Backport Request

Further comments

Reviewers: @webdriverio/project-committers

linux-foundation-easycla bot commented Mar 21, 2024 • edited

christian-bromann left a 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

christian-bromann left a comment

Choose a reason for hiding this comment

christian-bromann commented Mar 27, 2024

KhushbuRander commented Mar 21, 2024 •

edited

linux-foundation-easycla bot commented Mar 21, 2024 •

edited