Hybrid Automated Test (Combine API Test and UI Test in Single End to End Test Scenario)

We recently brainstormed how could we write more sustainable automated Web UI test that is independent from "highly volatile" test data which could be changed by any CRUD operation without testers' knowledge.

We come to the conclusion that we can write hybrid test case that combines both API test and UI test. The API test is used to identify and store non-deterministic values returned by the server into temporary variables.

These variable values will then be used to compare against the values displayed on the Web pages by the UI test.

Please find below a video recording for the mentioned POC hybrid test case written by using Cypress.io.

Please note that Cypress.io's locally declared variable value can't be persisted in global scope due to its commands execution' asynchronous nature.

Therefore the value that is assigned to a variable in a specific cypress command will not be persisted and be passed on to the next command if you do not chain them together.

In the sample Cypress code that I provided below, I have used cypress's `wrap` and `alias` features to persist and pass on the variable value captured from earlier command to the next step for assertion.

describe("Overall test summary", function () {        it("Test case title", () => {          cy.request({             method: "GET",             url: "{API_ENDPOINT_URL}",             headers: {              //API request header values              }          }).then((response) => {              //Typical assertion steps go here             expect(response.body).to.be.not.null;             expect(response.status).to.equal(200);             expect(response.body).to.have.property("data");              cy.log("response.body.data.name = " + response.body.data.name);              cy.log("response.body[\"data\"][\"name\"] = " + response.body["data"]["name"]);              const respBody = response.body;              cy.log("respBody[\"data\"][\"name\"] = " + respBody["data"]["name"]);              const product_name = respBody["data"]["name"];              cy.wrap(product_name).as('product_name');          });               cy.get('@product_name').then(product_name => {              cy.log("product_name retrieved from alias = " + product_name);              cy.visit("{WEB_URL}");                                              .get("div[class='language-selection'] div:nth-child(1) button:nth-child(1)").click()                                            .get("div[class='_2rQP1z'] span").invoke("text").should("contain", product_name)            });     }); });