Introduction
In today's globalized world, it is essential for web applications to cater to users from different linguistic backgrounds. In this blog post, we will explore a simple language detector app that displays a message based on the user's browser language settings. Additionally, we will walk through the process of testing this app using Cypress, a powerful end-to-end testing framework.
Understanding the Language Detector App
The language detector app is a basic HTML and JavaScript application that detects the browser's language settings and displays a corresponding message. Below is the content of the index.html file, which forms the core of the app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language Detector</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
</style>
</head>
<body>
<h1 id="message"></h1>
<script>
// Define translations
const translations = {
"en": "Hello! Your browser is set to English.",
"es": "¡Hola! Tu navegador está configurado en Español.",
"fr": "Bonjour! Votre navigateur est défini sur Français.",
"pt": "Olá! Seu navegador está definido para Português."
};
// Detect browser language
const userLang = navigator.language || navigator.languages[0];
const langCode = userLang.split('-')[0]; // Get base language code (e.g., 'en' from 'en-US')
// Set message
document.getElementById("message").textContent = translations[langCode] || "Hello! Your browser's language is not listed.";
</script>
</body>
</html>
How It Works
-
Translations: The app defines a set of translations for different languages (
en,es,fr,pt). -
Language Detection: It detects the browser's language using
navigator.languageornavigator.languages[0]. - Message Display: Based on the detected language, it displays the corresponding message from the translations object. If the language is not listed, it displays a default message.
Testing the Language Detector App with Cypress
Cypress is an end-to-end testing framework that makes it easy to write, execute, and debug tests for web applications. In this section, we will create tests to verify that the language detector app displays the correct message based on different browser language settings.
Below is the content of the cypress/e2e/spec.cy.js file, which contains the Cypress tests:
describe('Lang App', () => {
it("renders with the default language (en-GB)", () => {
cy.visit('./index.html')
cy.contains(
'h1',
'Hello! Your browser is set to English.'
).should('be.visible')
})
it("renders in en-US", () => {
cy.visit('./index.html', {
onBeforeLoad (win) {
Object.defineProperty(win.navigator, 'language', {
value: 'en-US'
})
}
})
cy.contains(
'h1',
'Hello! Your browser is set to English.'
).should('be.visible')
})
it("renders in es-ES", () => {
cy.visit('./index.html', {
onBeforeLoad (win) {
Object.defineProperty(win.navigator, 'language', {
value: 'es-ES'
})
}
})
cy.contains(
'h1',
'¡Hola! Tu navegador está configurado en Español.'
).should('be.visible')
})
it("renders in fr-FR", () => {
cy.visit('./index.html', {
onBeforeLoad (win) {
Object.defineProperty(win.navigator, 'language', {
value: 'fr-FR'
})
}
})
cy.contains(
'h1',
'Bonjour! Votre navigateur est défini sur Français.'
).should('be.visible')
})
it("renders in pt-BR", () => {
cy.visit('./index.html', {
onBeforeLoad (win) {
Object.defineProperty(win.navigator, 'language', {
value: 'pt-BR'
})
}
})
cy.contains(
'h1',
'Olá! Seu navegador está definido para Português.'
).should('be.visible')
})
it("renders with a not listed language (nb-NO)", () => {
cy.visit('./index.html', {
onBeforeLoad (win) {
Object.defineProperty(win.navigator, 'language', {
value: 'nb-NO'
})
}
})
cy.contains(
'h1',
"Hello! Your browser's language is not listed."
).should('be.visible')
})
})
How the Tests Work
- Default Language Test: The first test verifies that the app displays the correct message for the default language setting (English).
-
Specific Language Tests: The subsequent tests override the browser's language setting (
navigator.language) to simulate different languages (en-US,es-ES,fr-FR,pt-BR) and verify that the app displays the correct message for each language. -
Not Listed Language Test: The final test simulates a browser language setting that is not listed in the translations object (
nb-NO) and verifies that the app displays the default message for unlisted languages.
Running the Tests
To run the Cypress tests, follow these steps:
- Install Cypress: Ensure you have Cypress installed in your project. If not, you can install it using npm:
npm install cypress --save-dev
- Open Cypress: Open the Cypress test runner:
npx cypress open
-
Run the Tests: In the Cypress test runner, click on the
spec.cy.jsfile to run the tests.
Below the result of the tests executed in headless mode.
Lang App
✓ renders with the default language (en-GB) (42ms)
✓ renders in en-US (21ms)
✓ renders in es-ES (16ms)
✓ renders in fr-FR (16ms)
✓ renders in pt-BR (17ms)
✓ renders with a not listed language (nb-NO) (20ms)
6 passing (166ms)
Conclusion
In this blog post, we explored a simple language detector app that displays a message based on the user's browser language settings. We also demonstrated how to write and run end-to-end tests for this app using Cypress. By following these steps, you can ensure that your app behaves correctly for users with different language settings.
Happy testing!
The whole code demonstrated in this blog post can be found at https://github.com/wlsf82/lang-app.
Would you like to learn Cypress in a hands-on course?
I introduce you to my course: 🌲 Cypress, from Zero to the Cloud ☁️.
I hope you like it!
Top comments (0)