How to Create Click-up issues on failed tests using Cypress?

by Chinmay Latkar | Oct 6, 2022 | Blog

The purpose of this blog is to provide an overview of Create Click-up issues on failed tests using Cypress for reporting bugs during testing or when automated tests are failed. Click-up is a cloud-based collaboration and project management tool suitable for all team sizes to adopt as an Application Lifecycle Management tool. In our context, we will use it to create bug tasks for failed tests.

In this blog, we will have a quick overview of:-

• What is Click-up?
• What is Click-up API and how to use them?
• How to automate the Click API using cypress.
• How To create a task automatically when a Cypress test fails with Screenshots.

Requirements:-

• Node.js to be installed.
• Any IDE recommended is VS Code.
• Cypress 10 or any version of Cypress installed.
• Click-up account.

Now let’s start with our agenda

What is Click-up?

It is a project management tool that is easy to customize and use.

What are Click-up API and how do use them?

Click API  is a service provided by Click-up through which you can operate Click-up without UI.

You can find more information about this by visiting this page:-https://clickup.com/api

We can use them through API client tools like the postman or you can use them in any programming language/ technology which supports HTTPS protocols. In this blog, we are using the Cypress testing tool which is Node.js-based technology using JavaScript as a programming language.

How to automate the Click-API using Cypress?

Cypress’s cy.request API module helps you to automate API quickly.

How to create a task automatically when a Cypress test fails with Screenshots.

Requirements.

• Personal access token for Click-up.
• Postman or any API client tool.
• List Id, Folder Id, Space Id, and Team id of Click-up workspace. 

Let’s see how can we get the personal access token for Click-up:-

1. Navigate to your personal Settings. 

2. Click Apps in the left sidebar.

3. Click Generate to create your API token.

4. Click Copy to copy the key to your clipboard.

Note:- You can use this personal access token in API for authentication. 

 Get the Team Id 

This endpoint is used to view teams: user groups in your workspace. Use the following API request in postman or any other API client tool for getting the team id which needs to pass as a URI parameter to get the Space id.

Request:- https://api.clickup.com/api/v2/team

Method:- GET

Headers: key:- Authorization

Value:-Personal access token 

Response JSON:

{
    "teams": [
        {
            "id": "33131480",
        }
             ]
 }

Now we need to get the Space Id

View the spaces available in a workspace.

Request:-https://api.clickup.com/api/v2/team/<team_id>/space

Method:-GET

Headers: key:- Authorization

               Value:-Personal access token 

Response JSON

{
    "spaces": [
        {
            "id": "1236491",
        }
              ]
}

Till now we have fetched responses of two endpoints

Let’s get the folder id 

View the folders in space.

Request:-https://api.clickup.com/api/v2/space/<space_id>/folder

Method:-GET

Headers: key:- Authorization

               Value:-Personal access token 

Response JSON

{
    "folders": [
        {
            "id": "34231390",
            "name": "Product Roadmap",
            "orderindex": 0,
            "override_statuses": true,
            "hidden": false,
            "space": {
                "id": "3376891",
                "name": "New Space"
                     }
       }
               ]
}

Now The last thing to get is a List of id 

View the lists within a folder.

Request:- https://api.clickup.com/api/v2/folder/<folder>/list

Method:-GET

Headers: key:- Authorization

               Value:-Personal access token 

Response JSON:

{
    "lists": [
        {
            "id": "7623172",
            "name": "Jan",
            "orderindex": 2,
            "status": null,
            "priority": null,
            "assignee": null,
            "task_count": 2,
            "due_date": "1612045800000",
            "start_date": "1609453800000",
            "folder": {
                "id": "3488090",
                "name": "Product Roadmap",
                "hidden": false,
                "access": true
        }
      }
     ]
}

We have fetched all the required Uri parameters for getting the list id now we can use this list id as a Uri parameter for generating tickets through automation using cypress

•  How to create a task automatically when a cypress test fails with screenshots.

We have successfully extracted the list id which we will be using as a Uri parameter for creating a task. The cypress “command.js” file is a  file where we have to place reusable code inside that we have the “cypress.command.add” method so we can use that code anywhere in cypress tests.

Paste the following code in Cypress/ Supports/ Command.js

Below is create task method name and we are passing the feature name, scenario name, and steps as a parameter which will be added to the ticket in Click-up

Cypress.Commands.add("CreateTask",(featurename,scenarioname,allsteps)=>

Now to call the endpoint with cy.request we will require the endpoint, the request method, and the access token, so we will store everything in a variable and access in the below code.  mention all endpoints, request methods, and access tokens as variables. 

let endpoint = 'https://api.clickup.com/api/v2/list/<listid>/task'
    let req = 'POST'
    let token = Access_Token '
    const headers = {
        'Authorization': token,
        'Content-Type': 'application/json'
                    }

We are passing all the variables to the cy.request which we mentioned above.

Calling API:- This API will create a ticket for us and the response that we yield will give the id of the ticket which we can use to attach a screenshot in the next request.

cy.request({ method: req, url: endpoint, 'headers': headers, body: body }).then((response) => {
        cy.log(JSON.stringify(response))
        id = response.body.id
        Getting the Response 
        cy.log(id)

In this case, we are getting the id of the ticket which we can use in the next request as a Uri parameter. Now we need to get the path of the failed screenshot dynamically and pass it to the API so that screenshot should get attached to the same click-up ticket.

The below code will attach a screenshot to the ticket which we have created through automation.

const screenshotsFolder = Cypress.config("screenshotsFolder");
         
            const screenshotFileName = `${featurename} -- ${scenarioname} (failed).png`;
Attaching ScreenShot
            cy.request("https://clickup.com")
 var data = new FormData();
            data.append("filename", screenshotFileName);
            cy.log(id)

We have to attach a screenshot as multipart form data and pass it as a Blob as a request for the above ticket which we have created. Here we have used XMLHttp request as cy.request does not support multipart form data.

                cy.intercept({
                method: "POST",
                url: "https://api.clickup.com/api/v2/task/"+id+"/attachment?custom_task_ids=false&team_id=3344860"
            }).as('uploadFile')
                .window()
                .then((win) => {
                    cy.wait(3000)

Here we are reading the screenshot file and creating Blob and passing it as a binary.

cy.readFile(`${screenshotsFolder}/${Cypress.spec.name}/${screenshotFileName}`, 'binary')
                        .then((binary) => Cypress.Blob.binaryStringToBlob(binary))
                        .then((blob) => {
                            const xhr = new win.XMLHttpRequest();
                            data.set("attachment", blob, `${screenshotsFolder}/${Cypress.spec.name}/${screenshotFileName}`);
                            xhr.open("POST", "https://api.clickup.com/api/v2/task/"+id+"/attachment?custom_task_ids=false&team_id=3344860");
                            let token = Access_Token

We have used XMLHttp request to process and send multipart form data in the request.

 xhr.setRequestHeader('Access-Control-Allow-Headers', '*')
                            xhr.setRequestHeader("Authorization", token);
                            xhr.send(data);
                        })
                })
            cy.wait('@uploadFile').then((response) => {
                cy.log(response)
            })
})
}) 

Now when the test fails this part of the code will get executed which will call the method mentioned in the command.js file and automatically create the ticket with a failed screenshot and description.

Paste the code in Cypress/Beforeafter.js.

afterEach(() => {

This Code Will Execute after each test
   cy.on("test:after:run", (test, runnable) => {
      setTimeout(() => {
            Cypress.env("ok",test)
      }, 4000);         
        }).then(()=>
        {

Now we have to extract the feature file name, scenario name, and steps so that we can pass it to the Click-up ticket. We have a test state as a window object which yields all the properties related to the test like test name, test status, etc…

cy.wait(6000)
          let chip = Cypress.env("ok")
          let status = chip.state
          let scenario = chip.title
          let allsteps = ""
          let Featurename = testState.gherkinDocument.feature.name
       let current = chip._testConfig.testConfigList[0].overrides.env.__cypress_cucumber_preprocessor_dont_use_this.currentStep.pickleStep.text
         let a = chip._testConfig.testConfigList[0].overrides.env.__cypress_cucumber_preprocessor_dont_use_this.allSteps
          for (let index = 0; index < a.length; index++) {
              const element = a[index]      
              allsteps += element.pickleStep.text
          }

Calling the custom command which will create a ticket every time the test fails. Passing the feature name scenario name and all steps as parameters to be added to the ticket.

This will create a ticket in Click-up. 

cy.CreateTask(Featurename,scenario,allsteps)
        })
                })

• The task will be created in Click-up as shown below in the screenshot:-

Conclusion:-

We can create tasks with screenshots attachments for failed test cases using click-up APIs and automate them using Cypress automation.

Read more blogs here

Chinmay Latkar

By profession an Automation Test Engineer, Having 3+year experience in Manual and automation testing. Having hands-on experience in Cypress with JavaScript, NodeJS. Designed automation web framework in Cypress, Webdriver.io, Selenium with jest in JavaScript. He loves to explore and learn new tools and technologies.