Transcripted Summary
# Writing your test file
Let's take a look at another important part of a test project - the test file.
Let's go ahead and open example.spec.ts.
First, we'll see the import.
import { test, expect } from '@playwright/test';
This will allow us to use the Playwright commands to implement a test.
First, we see test, which is the test object for the test case, and expect, which we'll use for assertions.
Both of them are coming from @playwright/test.
Here, we see the first part of a test - the test name and the page that comes from Playwright as well.
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
With this page object, we'll be able to access functions and perform the commands on each page.
Conceptually, a test is composed of an action and an assertion, and this is exactly what we see here.
First, we have the command page.goto() and the URL.
This will make the test open the browser and go to this URL, "https://playwright.dev".
Next, we see this assertion through the command expect.
It will check if the page that just opened has the title "Playwright".
This is a regular expression and, of course, we have a lot of other commands that you could use to make this assertion.
Let's take a look at the next test.
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Click the get started link.
await page.getByRole('link', { name: 'Get started' }).click();
// Expects the URL to contain intro.
await expect(page).toHaveURL(/.*intro/);
});
We see a familiar command that we already saw in the previous test.
This will do exactly the same, which is open the page and go to "https://playwright.dev".
Next, we'll see that it performs a click on an element with the role link and the name "Get started."
Here, we can see that it's performing a click() - again - an action.
Next, as we already learned, we have the assertion, which we'll see through the command expect to have /.*intro/.
Meaning that, as soon as you open this page and you click on this element, we need to check if the "intro" is there in the URL.
To exercise what we just learned, let's take a look at this test case. Inside example.spec.ts, you'll see a list of seven steps.
If we open the browser, we'll see what it does.
First step is to open the page - "https://playwright.dev".
Click "Get started", mouse over the language dropdown, which is this one right here, and click "Java."
Check the URL to if it changed accordingly - "https://playwright.dev/java/docs/intro".
Check that the text "Installing Playwright" is not being displayed.
As you can see here in the Node.js version, we do have the text here and we want to make sure it's not being displayed on the Java page.
Step 7 is check if the text below "Playwright is distributed…." is displayed.
On the Node page, it doesn't display, so we want to make sure that information is being displayed.
This is just a simple test for us to exercise a few commands.
Back to VS Code, let's start by naming our test.
We'll start with
test('check Java page', async ({ page }) => {
await page.goto('https://playwright.dev');
});
The first thing is to open the page.
We already know that we have page.goto and we can pass the URL - "https://playwright.dev".
One quick correction here is that page.goto() does have the await at the beginning.
Since this is a Node application, we do want to run them synchronously, so we do need the await to make sure the next step is going to be executed only when the page.goto() finishes.
Consider this from now on and, in our GitHub repo, the code is up-to-date.
The next thing is to click the "Get started" - we already know that we need the await command to do it synchronously after the first one is completed. We'll get the element by role 'link' and name 'Get started' and click on it.
test('check Java page', async ({ page }) => {
await page.goto('https://playwright.dev');
await page.getByRole('link', {name: 'Get started'}).click();
});
Next, we'll mouse over the language dropdown.
If you open Chrome and inspect this dropdown, we'll see there's a button here, so we can do use the role button on hover.
Just remember that we do want to click on "Node.js", because this is how it comes by default.
Let's go ahead and add that.
test('check Java page', async ({ page }) => {
await page.goto('https://playwright.dev');
await page.getByRole('link', {name: 'Get started'}).click();
await page.getByRole('button', {name: 'Node.js'}).hover();
});
This time, it's going to be the role 'button' and the name is "Node.js."
As we mentioned, it's going to be a hover action.
As soon as we hover on it, we want to click on the Java link.
test('check Java page', async ({ page }) => {
await page.goto('https://playwright.dev');
await page.getByRole('link', {name: 'Get started'}).click();
await page.getByRole('button', {name: 'Node.js'}).hover();
await page.getByText('Java', { exact:true }).click();
});
We'll get the element by getting the exact text 'Java' here and we'll, of course, do the click here.
Once we click on 'Java', we'll check the URL.
Now, it comes to the assertion step.
test('check Java page', async ({ page }) => {
await page.goto('https://playwright.dev');
await page.getByRole('link', {name: 'Get started'}).click();
await page.getByRole('button', {name: 'Node.js'}).hover();
await page.getByText('Java', { exact:true }).click();
await expect(page).toHaveURL('https://playwright.dev/java/docs/intro');
});
Here, we could use a regular expression as we saw earlier - instead of /.*intro/ we would do java or we could use the exact URL and it would do the same thing.
It depends on your project, etc. Let's do the exact URL just to see a different example.
Next, we'll check the text.
To check the text, we'll need to do a getByText.
test('check Java page', async ({ page }) => {
await page.goto('https://playwright.dev');
await page.getByRole('link', {name: 'Get started'}).click();
await page.getByRole('button', {name: 'Node.js'}).hover();
await page.getByText('Java', { exact:true }).click();
await expect(page).toHaveURL('https://playwright.dev/java/docs/intro');
await expect(page.getByText('Installing Playwright', {exact:true})).not.toBeVisible();
});
We'll get the text "Installing Playwright" and we also want to get the exact text.
We'll do .not.toBeVisible() because we want it to not be visible.
Lastly, we are going to check if the text below is displayed.
Because it's a huge text, let's create a variable, so it can store that and it doesn't create a huge command.
test('check Java page', async ({ page }) => {
await page.goto('https://playwright.dev');
await page.getByRole('link', {name: 'Get started'}).click();
await page.getByRole('button', {name: 'Node.js'}).hover();
await page.getByText('Java', { exact:true }).click();
await expect(page).toHaveURL('https://playwright.dev/java/docs/intro');
await expect(page.getByText('Installing Playwright', {exact:true})).not.toBeVisible();
const javaDescription = `Playwright is distributed as a set of Maven modules. The easiest way to use it is to add one dependency to your project's pom.xml as described below. If you're not familiar with Maven please refer to its documentation.`;
await expect(page.getByText(javaDescription)).toBeVisible();
});
So we'll use const javaDescription, or whichever name you prefer, and we are going to use back quotes, because it has some special characters.
Then we want to check if the text is displayed.
To run the test, let's go ahead and add .only to the beginning of the test.
This is used when you want to run only one or some tests, you can add that to each of them.
Save the document and open the Terminal.
For this one, we could use any command on the package.json file, but in this case, I would like to type npx playwright test tests/ - that's going to run only the test inside the folder test, and I'm going to add --project=chromium.
It's going to run this test only on Chromium and it passed.
Here we are, we ran our first test.
If you want to see the report, as usual, you can copy this command and it will open right away.
You can see that all the steps were executed successfully.
Yes, we've made it to the end of chapter 2. Congratulations again.
Take a look at the quiz below one more time and don't forget to take a look at the extra exercises.
I hope you enjoyed it and I'll see you in the next chapter. Happy testing.
Resources
- Introduction to Playwright - GitHub repository - Branch 2
- Chapter 2 - Extra Exercises
- Chapter 2 - Extra Resources
