diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d3f52e18..562b8cd3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -150,8 +150,14 @@ The data and socket logic are in `src/mixins/socket.js`.
 
 # Unit Test
 
-Yes, no unit test for now. I know it is very important, but at the same time my spare time is very limited. I want to implement my ideas first. I will go back to this in some points.
+It is an end-to-end testing. It is using Jest and Puppeteer.
 
+```
+npm run build
+npm test
+```
+
+By default, the Chromium window will be shown up during the test. Specifying `HEADLESS_TEST=1` for terminal environments.
 
 # Update Dependencies
 
diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
index cac12004..07830ca3 100644
--- a/jest-puppeteer.config.js
+++ b/jest-puppeteer.config.js
@@ -1,6 +1,6 @@
 module.exports = {
     "launch": {
-        "headless": false,
+        "headless": process.env.HEADLESS_TEST || false,
         "userDataDir": "./data/test-chrome-profile",
     }
 };
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 8a20fbdb..543ca041 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -60,7 +60,6 @@ export default {
 
             this.$root.login(this.username, this.password, this.token, (res) => {
                 this.processing = false;
-                console.log(res);
 
                 if (res.tokenRequired) {
                     this.tokenRequired = true;
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 8a12ae4b..321e2d6b 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -179,7 +179,7 @@ export default {
             });
 
             socket.on("connect", () => {
-                console.log("connect");
+                console.log("Connected to the socket server");
                 this.socket.connectCount++;
                 this.socket.connected = true;
 
diff --git a/test/test.spec.js b/test/test.spec.js
index 4494f158..00b26032 100644
--- a/test/test.spec.js
+++ b/test/test.spec.js
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-unused-vars
 const { Page } = require("puppeteer");
+const { sleep } = require("../src/util");
 
 /**
  * Set back the correct data type for page object
@@ -15,11 +16,13 @@ afterAll(() => {
 
 });
 
+const baseURL = "http://127.0.0.1:3002";
+
 describe("Init", () => {
     const title = "Uptime Kuma";
 
     beforeAll(async () => {
-        await page.goto("http://127.0.0.1:3002");
+        await page.goto(baseURL);
     });
 
     it(`should be titled "${title}"`, async () => {
@@ -35,32 +38,56 @@ describe("Init", () => {
         await page.type("#floatingPassword", "admin123");
         await page.type("#repeat", "admin123");
         await page.click(".btn-primary[type=submit]");
-        await page.waitFor(3000);
+        await sleep(3000);
 
         // Go to /setup again
-        await page.goto("http://127.0.0.1:3002/setup");
-        await page.waitFor(3000);
+        await page.goto(baseURL + "/setup");
+        await sleep(3000);
         const pathname = await page.evaluate(() => location.pathname);
         expect(pathname).toEqual("/dashboard");
 
         // Go to /
-        await page.goto("http://127.0.0.1:3002");
-        expect(pathname).toEqual("/dashboard");
+        await page.goto(baseURL);
         expect(pathname).toEqual("/dashboard");
     });
 
-    describe("Init", () => {
+    describe("Settings", () => {
+        beforeAll(async () => {
+            await page.goto(baseURL + "/settings");
+        });
 
-    });
-});
+        it("Change Language", async () => {
+            await page.select("#language", "zh-HK");
+            let languageTitle = await page.evaluate(() => document.querySelector("[for=language]").innerText);
+            expect(languageTitle).toMatch("語言");
 
-describe("Status Page", () => {
-    const title = "Uptime Kuma";
-    beforeAll(async () => {
-        await page.goto("http://127.0.0.1:3002/status");
+            await page.select("#language", "en");
+            languageTitle = await page.evaluate(() => document.querySelector("[for=language]").innerText);
+            expect(languageTitle).toMatch("Language");
+        });
+
+        it("Change Theme", async () => {
+            // Light
+            await page.click(".btn[for=btncheck1]");
+            await page.waitForSelector("div.light", {
+                timeout: 2000
+            });
+
+            await page.click(".btn[for=btncheck2]");
+            await page.waitForSelector("div.dark", {
+                timeout: 2000
+            });
+        });
     });
-    it(`should be titled "${title}"`, async () => {
-        await expect(page.title()).resolves.toMatch(title);
+
+    describe("Status Page", () => {
+        const title = "Uptime Kuma";
+        beforeAll(async () => {
+            await page.goto(baseURL + "/status");
+        });
+        it(`should be titled "${title}"`, async () => {
+            await expect(page.title()).resolves.toMatch(title);
+        });
     });
 });