Skip to content

Commit

Permalink
copy
Browse files Browse the repository at this point in the history
  • Loading branch information
jaffrepaul committed Sep 5, 2023
1 parent 14e0658 commit c9d95a8
Show file tree
Hide file tree
Showing 8 changed files with 38 additions and 34 deletions.
72 changes: 38 additions & 34 deletions docs/guides/cloud/branch-review.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ title: Branch Review
sidebar_position: 35
---

Cypress Branch Review allows you to quickly identify the impact a pull request might have on your test suite in a single view. Compare which tests are failing, flaky, pending, added, or modified between the source and base branches.
Cypress Branch Review is designed to elevate your pull request (PR) review workflow. It allows you to quickly identify the impact a pull request might have on your test suite in a single view. Compare which tests are failing, flaky, pending, added, or modified between the **<u>source</u>** and **<u>base</u>** branches.

Previously, pinpointing changes in your test suite's results required a manual side-by-side comparison between your newly-introduced branch's test runs and your base branch's test runs. This sub-optimal workflow often fails to answer the fundamental questions, _what changed_ and _why?_ You might be left wondering if the same tests are flaky between branches, when new failures were introduced, or if you added sufficient test coverage to your new branch.

<DocsImage
src="/img/guides/cloud/branch-review/branch-review.jpg"
src="/img/guides/cloud/branch-review/branch-review3.jpg"
alt="Cypress Branch Review"
/>

Expand Down Expand Up @@ -42,9 +44,11 @@ Branch Review is the default view of the **Branches** tab. You can also toggle t

### Review Header

At the left side of the header is the Git commit message, PR selector, PR status and base and target branch indicators. If there are multiple pull requests open for the same branch, you can select the pull request you want to review from the dropdown to the right of the commit message.
The header includes the Git commit message, PR selector, PR status and base and target branch indicators with the Cypress Cloud test run ID number (#).

If there are multiple pull requests open for the same branch, you can select the pull request you want to review from the dropdown to the right of the commit message.

The right side of the header includes the Cypress Cloud test run number and test summary. Clicking the test run number will link you directly to the [test overview](/guides/cloud/recorded-runs#Overview-tab).
Clicking the branch indicators will link you directly to the appropriate [test overview](/guides/cloud/recorded-runs#Overview-tab) and hovering on these elements exposes additional test meta data.

<DocsImage
src="/img/guides/cloud/branch-review/branch-review-header.jpg"
Expand All @@ -56,70 +60,70 @@ The right side of the header includes the Cypress Cloud test run number and test
When on the review screen, you will see tabs Failures, Flaky, Pending, Added, and Modified. Each tab will show you the tests that fall into that category. You can click on a test to view the test details.

<DocsImage
src="/img/guides/cloud/branch-review/branch-review-details.jpg"
src="/img/guides/cloud/branch-review/branch-review-details2.jpg"
alt="Branch Review Details"
caption="Viewing new failing tests for this PR"
/>

:::info

The arrows next to the numbers in each of the tabs indicate:
The status key in each of the tabs indicates:

- <svg
width="16"
height="16"
viewBox="0 0 16 16"
width="41"
height="20"
viewBox="0 0 41 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 10V4M12 4L6 4M12 4L4 12"
d="M15 9L13 11L17 11L15 9Z"
fill="#C62B49"
stroke="#C62B49"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg> total number increased in your branch
- <svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 6V12M12 12L6 12M12 12L4 4"
stroke="#C62B49"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M27.1221 15.1641C25.085 15.1641 23.7656 14.0293 23.6357 12.4707L23.6289 12.3887H24.8115L24.8184 12.457C24.9209 13.4277 25.8096 14.0977 27.1221 14.0977C28.4141 14.0977 29.2959 13.373 29.2959 12.3271V12.3135C29.2959 11.1035 28.4277 10.4268 27.0469 10.4268H25.8096V9.3877H26.9922C28.168 9.3877 28.9883 8.66309 28.9883 7.67871V7.66504C28.9883 6.63281 28.3115 6.03809 27.1084 6.03809C25.9463 6.03809 25.1191 6.65332 25.0166 7.65137L25.0098 7.71973H23.8271L23.834 7.65137C23.9912 6.04492 25.2627 4.97168 27.1084 4.97168C28.9883 4.97168 30.2256 6.01758 30.2256 7.51465V7.52832C30.2256 8.74512 29.3643 9.5791 28.1338 9.83887V9.86621C29.5693 9.98926 30.5469 10.8848 30.5469 12.2861V12.2998C30.5469 13.9473 29.0977 15.1641 27.1221 15.1641Z"
fill="#C62B49"
/>
</svg> total number decreased in your branch
</svg>
total number increased in your branch
- <svg
width="16"
height="16"
viewBox="0 0 16 16"
width="41"
height="20"
viewBox="0 0 41 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 12L13 8M13 8L9 4M13 8L3 8"
stroke="#C62B49"
d="M15 11L13 9L17 9L15 11Z"
fill="#00814D"
stroke="#00814D"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg> there are new items, but the total count remained the same - for example, <em>
1 resolved and 1 added
</em>
<path
d="M28.4893 15V12.9492H23.5332V11.835L27.8604 5.13574H29.6787V11.8691H31.0732V12.9492H29.6787V15H28.4893ZM24.75 11.8691H28.4893V6.18848H28.4482L24.75 11.8418V11.8691Z"
fill="#00814D"
/>
</svg>
total number decreased in your branch
- &nbsp;<svg width="34" height="20" viewBox="0 0 34 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.9893 15V12.9492H13.0332V11.835L17.3604 5.13574H19.1787V11.8691H20.5732V12.9492H19.1787V15H17.9893ZM14.25 11.8691H17.9893V6.18848H17.9482L14.25 11.8418V11.8691Z" fill="#747994"/>
<path d="M1 20V0H-1V20H1Z" fill="#E1E3ED" mask="url(#path-1-inside-1_3118_1775)"/>
</svg>
there are new items, but the total count remained the same - for example, <em>1 resolved and 1 added</em>

:::

### Review Test Comparison

Navigating into the test detail view reveals a side-by-side comparison of the test in each branch which can help elevate the source of flake within tests throughout different attempts. Review the test definition panel for diff snapshots to help quickly determine changes in test code.
Navigating into the test detail view reveals a side-by-side comparison of the test results on both branches, as well as, artifacts so you can compare before vs. after your PR. This can help elevate the source of flake within tests throughout different attempts. Review the test definition panel for diff snapshots to help quickly determine changes in test code.

<DocsImage
src="/img/guides/cloud/branch-review/test-comparison.jpg"
src="/img/guides/cloud/branch-review/test-comparison2.jpg"
alt="Test Comparison View"
/>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified static/img/guides/cloud/branch-review/branch-review-header.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c9d95a8

Please sign in to comment.