Want to start e2e testing in a project for work
Hey guys! I been wanting to start e2e testing for a crucial project for work (in fact I have a basic setup already). The thing is that there are things that are not clear to me so I wanted to ask you for advice.
- Is a react web app with i18n.. so I want to know if I should have some special setup for that, or do I only need that if we're going to test internationalization specifically?
- Is a medium size web app that is mostly consists in state management and CRUD operations .. normally we work locally with a server instance running in a testing environment (so we don't normally work with our backend locally and sometimes it takes a lot of time to wait for it to be ready and stuff). The thing is, I imagine that there are times when you can't afford or you don't want to do certain things with the API (because it is maybe expensive, takes some time, or changes the state of your database) and I know that is there's this concept of mocking in the testing jargon but I don't know if this is something that exists in Playwright. At some point I even though of running an instance the whole project in a docker container and run there the tests, but I think that's a little extreme and I don't feel like we should go that deep. I just want to have some form of static data so I can test the frontend and not depend on the backend response. It's that possible or trivial to do in playwright?
For now these are the things that I don't know and prevents me for starting to write tests.. I have a lot of experience developing but never in my life felt the need to test something or even learn testing.. but in this project in particular I really feel the need of some form of automated testing since manual testing really takes a lot of our time and been wanting to do something about it.
If there's more context that I can give please let me know. Thanks in advance 🤘
This thread is trying to answer question "Does the user need a special setup for a react web app with i18n, and do they need to test internationalization specifically? Can they use mocking in Playwright to test the frontend without depending on the backend response?"
Related Ask AI answer for "What is the process of setting up and testing internationalization in a React web app using Playwright?".
Answer
Setting Up and Testing Internationalization in a React Web App with Playwright
First, you'll need to set up your React app for internationalization (i18n). This involves adding libraries like react-i18next or react-intl.
// Install the library
npm install react-i18next i18nextNext, create translation files or use an online service for your app's text content.
// Example of a translation file
{
"welcome": "Welcome to our app!",
"logout": "Log out"
}Testing Internationalization with Playwright
With @playwright/test, you can mock different language settings and check if the correct translations are displayed.
import { test } from '@playwright/test';
test('displays correct translation', async ({ page }) => {
await page.goto('https://ray.run');
// Mock network requests or modify browser settings here
// Check if the correct translation is displayed
});You can also mock backend responses, allowing you to test the frontend without depending on the backend.
test('mocks backend response', async ({ page }) => {
await page.route('https://ray.run/api/user', route => {
route.fulfill({
status: 200,
body: JSON.stringify({ name: 'John Doe' }),
});
});
await page.goto('https://ray.run');
// Check if the frontend handles the mocked response correctly
});This way, you can thoroughly test your app's i18n features without relying on real backend services. For more tips on efficient testing with Playwright, check out this blog post.
Related Discord Threads
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.