This video, released as part of Insum’s Fall 2019 Webinar Series,  is directed at APEX developers who are interested in Browser Test Automation. A prior knowledge of Cypress is not required or even expected:

Shownotes

Learn more about Cypress

The best resource for learning about Cypress is the website itself.

If you are more inclined to watch a video, I can recommend this one: Automated testing for the modern web

Session artifacts

Git repository

The repository for the code I wrote in the above session: https://github.com/hhudson/cypress_apex_demo

Bypassing the login

As I mentioned, I previously wrote a blog post on this subject : https://insum.talan.com/unit-testing-apex-3-methods-bypass-login-using-cypress-io/

Jquery to add test-friendly attributes to your buttons

In the session, I copied and pasted some Jquery on Page 0 that would apply some test-friendly selectors to all the buttons in my application:

<script type="text/javascript">
window.onload = function() {
  $("[type=button]").each(function() {
    $(this).attr(
      "data-cy",
      $(this)
        .text()
        .toLowerCase()
        .trim()
        .replace(/\s/g, "_") + "Button"
    );
  });
}
</script>

You can easily adapt this code to create selectors for all kinds of page elements.

Recommended Build Option

If you follow my lead and decide to edit your APEX application to make it more test-friendly. I recommend creating a build option to prevent your changes from being deployed to Production:

For example, the below is a screenshot of the ‘After Authentication’ process I created in the APEX application during the session. I applied the above ‘DEV ONLY’ build option to the process to prevent it from being exported from my Dev environment:

A note on Automating your tests

To go a little beyond the scope of the content in my session,  I’ll say a few words on automating your Cypress tests, going forward. You have many options for automating your tests. A few that I’ve explored / tried are:

1. Cypress dashboard
2. Gitlab pipelines
3. Github actions
4. CircleCI

Let me quickly show you how easy it is to start running your tests on a routine basis. My above-linked git repo demonstrates an option that I’m a fan of : combining Github with CircleCI

Step 1 : Add a circle.yml file to your repo

I added this generic circle.yml file: https://github.com/hhudson/cypress_apex_demo/blob/master/circle.yml

Step 2: Add a webhook to CircleCI to your repo

I added a webhook to : https://circleci.com/hooks/github

Step 3: Set up your project in CircleCI

After setting up your account, link to your Github account and “Set up” your Github project:

I accepted all of the defaults.

Step 4: Create your environment variables in CircleCI

My username and password were concealed as ‘environment variables’ in my test script. I needed to add their values to CircleCI:

Success!

I can now see my tests run on a nightly basis :

Conclusion

Thanks for reading. Please write below if you have any questions / comments / concerns. Also, please connect with me on twitter: @haydenhhudson

Share this: