Testing is a crucial aspect of software development, ensuring that applications meet their requirements and perform as expected. Luckily, with modern testing advancements, testing our applications can be pretty intuitive as we have enough resources and tools available to guide us through it. In the world of Kubernetes, however, where containerized applications are orchestrated and deployed at scale, testing can become a little tricky.

In this article, we'll explore front-end testing of Kubernetes applications using Testkube, a testing framework designed for Kubernetes environments. We'll illustrate this with a web application deployed to a local Kubernetes cluster using Minikube.

Pre-requisites

To follow this tutorial, you’ll need the following:

• Docker
• A Kubernetes cluster is up and running (We are using Minikube)
• A web application using your tools of choice
• A Testkube account. You can sign up here

For this tutorial, I’ll show you how I’m creating a very simple web app. You can of course use any you already have available, for which you’ll only need to write your Dockerfile to deploy it to your cluster.
‍

Let’s take a look at a simple web application we created with Node.js:

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
  if (req.url === '/header') {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(fs.readFileSync('components/header.html', 'utf8'));
  } else if (req.url === '/main') {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(fs.readFileSync('components/main.html', 'utf8'));
  } else {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello, Kubernetes!\n');
  }
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}/`);
});

Our app will have two components, header.html and main.html.

We’ll now write the Dockerfile for it to be able to deploy it into our cluster:

FROM node:14

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["node", "app.js"]

Let’s build, deploy it, and get the service URL:

docker build -t hellokube .
minikube start
kubectl create deployment hellokube --image=hellokube
kubectl expose deployment hellokube --type=NodePort --port=3000

‍

minikube service hellokube --url

‍

Once you open the provided URL, you should be able to access your web app in the browser as shown below.

Now, let’s write a few tests for our application. We’ll be using Cypress and Playwright testing tools to illustrate a more realistic scenario where we rely on different frameworks.

Cypress Test

Cypress is a powerful end-to-end testing framework. Here is an example of a Cypress test for our web app.

describe('HelloKube App', () => {
  it('should display "Hello, Kubernetes!" for any other route', () => {
    cy.request('http://<service-ip:port>/').its('body').should('equal', 'Hello, Kubernetes!\n');
  });
});

This test is available on GitHub in the file cypress-test.cy.js. Replace the `<service-ip:port>` with your cluster-specific details.

Playwright Test

Playwright is a testing library that allows us to automate different browsers. We’ll use it to interact with our web application.

const { test, expect } = require('@playwright/test');

test('HelloKube App', async ({ page }) => {
  await page.goto('http://<service-ip:port>/');

  const defaultContent = await page.locator('body');
  await expect(defaultContent).toContainText('Hello, Kubernetes!');
});

This test is available on GitHub in the file playwright-test.spec.js. Replace the `<service-ip:port>` with your cluster-specific details.

Both these tests are designed to check the ‘/’ page of the web app prints “Hello, Kubernetes!”.

Running Front-End Tests from within your Kubernetes Cluster

Running tests from within your Kubernetes cluster involves setting up testing infrastructure within the cluster itself. Typically, you would deploy testing tools as part of your testing environment.

For this, you would need to configure your testing system and environment that’s integrated with your CI/CD pipeline, package all of your test scripts and other dependencies into Docker images, and provide the necessary access to your application, as well as putting a tool or system into place to store and retrieve test results.

Fortunately, Testkube can help us speed run through all these configurations.

Using Testkube for Front-End Testing

Testkube simplifies the process of running tests within your Kubernetes cluster by providing a Kubernetes-native system. With Testkube, you can create, manage, and execute tests using Custom Resource Definitions (CRDs) and a user-friendly dashboard. Let's explore how Testkube streamlines the testing workflow:

Prerequisites

• Get a Testkube account.
• Kubernetes cluster - we’re using a local Minikube cluster.
• Testkube Agent configured on the cluster.

After meeting the prerequisites, you can launch a target Kubernetes cluster with a configured Testkube agent.

Start running your tests using Test Workflow in Testkube

Now all you need to do is tell Testkube where your project and your tests are and it will do the rest. We have kept all our tests in a GitHub repository and Testkube can easily access them using the URL.

Testkube comes with pre-existing testing types, which include Cypress and Playwright. Let’s create our Cypress test first, for which we can use a repository as our source. Head over to Add a New Test Workflow in the Testkube Dashboard.

A “Create a Test Workflow” dialog box appears that provides you with four options to create a Test Workflow:

• Create from Wizard: This option opens a dialog box that prompts you to create a new Test Workflow. 
• Start from an Example: This option allows you to use a pre-configured example, such as k6, Playwright, Cypress, Playwright, Postman, and many others.
• Combine Existing Workflows: This option allows you to combine and execute multiple existing Test Workflows sequentially or simultaneously.
• Import a Workflow from YAML: This option allows you to import a Test Workflow from a YAML definition.

Choose the “Start from an Example” option to create this workflow.

A new dialog box appears, with a list of test tools. We will start with creating first the Cypress Test Workflow so choose “Cypress” to get started.

Update the `Spec` here with the path to your Git repository that has the tests. Here is what our configuration looks like:

…
spec:
  content:
    git:
      uri: https://github.com/cerebro1/cypress-test
      revision: main
      paths:
      - test/cypress/executor-tests/cypress-13
  container:
    workingDir: /data/repo/test/cypress/executor-tests/cypress-13
…

Click on the “Create & Run” button to create and run the Test Workflow.

Testkube creates the Test Workflow and executes the tests as shown below:

Select “Run” to view the test logs. The following image shows the execution of our test in the file cypress-test.cy.js.

As we can see, our test is running successfully!

By clicking on the execution, you can see the logs in real-time and run your test as many times as you wish.

Now, let’s repeat the same process for our Playwright test.

Create a Test Workflow in the Testkube Dashboard using “Playwright” example.

Update the `Spec` here with the path to your Git repository that has the tests. Here is what our Playwright configuration looks like:

spec:
  content:
    git:
      uri: https://github.com/cerebro1/cypress-test
      revision: main
      paths:
      - test/playwright/executor-tests/playwright-project
  container:
    workingDir: /data/repo/test/playwright/executor-tests/playwright-project
    image: mcr.microsoft.com/playwright:v1.32.3-focal
    resources:
      requests:
        cpu: 2
        memory: 2Gi

Click on the “Create & Run” button to create and run the Test Workflow.

Testkube creates the Test Workflow and executes the tests as shown below:

What’s even better is that you also get to customize the test definition, schedule it, and access the artifacts produced when running the test:

Click on “Open report” and you can see all the tests that have been executed.

Select the “HelloKube App”, and you can view the details related to the test as shown below.

Both of these tests have been executed successfully.

And that’s it - that’s how simple it is to bring your front-end tests to the cloud!

Conclusion

Testing front-end applications in Kubernetes clusters presents unique challenges, but with the right approach and tools, you too can overcome these hurdles. Cloud-based testing, coupled with Kubernetes-native tools like Testkube, offers a comprehensive solution to ensure that you’re still safeguarding the reliability and quality of your applications.

Get started with Testkube and experience all the features that it brings to the table! Why not give it a go yourself? Sign up to Testkube and try one of our examples or head over to our documentation - if you get stuck or have questions, we’re here to help! Find an answer to your questions in the Testkube Knowledge Base or reach out to us on Slack. We’re eager to hear how you use our integrations!