How to write Web/HTML Test Cases

3649

OneCompiler challenges support Testcases for Web languages validation. You can write test-cases to be run against user's code and validate the results.

Validation input accepts any valid JavaScript code which will be executed against output of user submission. You can use DOM APIs to write test-cases.

Here are few ways to write test-cases:

Validation onDescription
DOM elementsEnsure that the expected DOM elements exist and have the correct properties.
Action on DOM elementsVerify that specific actions, such as clicks, produce the desired results.
Regex pattern matchesCheck if the code content matches specific patterns or criteria.

Note: To wait for DOM update you can use await

We'll see each of them in detail taking following user submission as reference:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button id="alertButton" onclick="alert('Alert clicked!')">
      Show alert
    </button>
    <button id="addH2Button" onclick="addH2Element()">Add Element</button>
    <h1 class="title">Hello</h1>
    <script src="script.js"></script>
  </body>
</html>

/* styles.css */
body {
  padding: 25px;
}
.title {
  color: #5c6ac4;
}

// script.js
function addH2Element() {
  var h2Element = document.createElement("h2");
  h2Element.textContent = "World!";
  h2Element.classList.add("title");
  document.body.appendChild(h2Element);
}

Validating DOM elements

Examples:

1. Validate page title

if(document.title === "Hello, World!"){
  return true;  
} else {
  return false;  
}

2. Validate if the user has added a button with id alertButton

const alertButton = document.getElementById("alertButton");
if(alertButton !== null && alertButton.tagName === "BUTTON"){
  return true;
} else {
  return false;
}

3. Validate if the user has added a h1 element with class title and text Hello

const h1Element = document.querySelector("h1.title");
if(h1Element !== null && h1Element.textContent === "Hello"){
  return true;
} else {
  return false;
}

Validating action on DOM elements

Examples:

1. Validate on click of addH2Button button a new tag "World!" is added with class title

const addH2Button = document.getElementById("addH2Button");
addH2Button.click();
//Note: await is required to wait for DOM to update
await new Promise((resolve) => setTimeout(resolve, 500));
const h2Element = document.querySelector("h2.title");
return h2Element !== null && h2Element.textContent === "World!";

2. Validate if the user has added a button with id alertButton and alert Alert clicked! is shown on click

const alertButton = document.getElementById("alertButton");
alertButton.click();
//Note: await is required to wait for DOM to update
await new Promise((resolve) => setTimeout(resolve, 500));
//Note: window.alert() can be used to validate alert message
return window.alert() === "Alert clicked!";

Regex match on code content

Files are available for validation in following format:

[
    {
        "name": string, 
        "content": string
    },
    ...
]

Example:

[
    {
        "name": "index.html",
        "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Hello, World!</title>\n    <link rel=\"stylesheet\" href=\"styles.css\" />\n  </head>\n  <body>\n    <button id=\"alertButton\" onclick=\"alert('Alert clicked!')\">\n      Show alert\n    </button>\n    <button id=\"addH2Button\" onclick=\"addH2Element()\">Add Element</button>\n    <h1 class=\"title\">Hello</h1>\n    <script src=\"script.js\"></script>\n  </body>\n</html>"
    },
    {
        "name": "styles.css",
        "content": "/* styles.css */\nbody {\n  padding: 25px;\n}\n.title {\n  color: #5c6ac4;\n}"
    },
    {
        "name": "script.js",
        "content": "// script.js\nfunction addH2Element() {\n  var h2Element = document.createElement(\"h2\");\n  h2Element.textContent = \"World!\";\n  h2Element.classList.add(\"title\");\n  document.body.appendChild(h2Element);\n}"
    }
]

1. Validate if styles.css file has color: #5c6ac4; rule

const stylesCssFile = files.find((file) => file.name === "styles.css");
return stylesCssFile !== undefined && stylesCssFile.content.includes("color: #5c6ac4;");

2. Validate if script.js file has addH2Element function defined

const scriptJsFile = files.find((file) => file.name === "script.js");
return scriptJsFile !== undefined && scriptJsFile.content.match(/addH2Element/i) !== null;