Chapter 4.1 - Specify Web Page

Specify the Start Webpage - because we know that we are adding the page or the URL with the fixture, but we can also pass the URL with the test
Fixtures / Test metadata
Interacting with different page elements
What are hooks
How to skip tests
Working with Client functions
Assertions with TestCafe

# Specify the Start Webpage Overview

You can specify the webpage where all the tests in a fixture begin with the fixture.page function - as we did in previous demos.

In this case, the start page of the test will be the URL that we specified with the fixture.

fixture `MyFixture`
    .page `https://devexpress.github.io/testcafe/example/`;
test('Test1', async t => {
    // Starts at http://devexpress.github.io/testcafe/example
});

For example, here we are adding a .page, or a fixture.page function, and passing the URL for the application under test. That means all the tests will use the page from the fixture. This is the first case.

In the second case, we can specify the start with a page with the test.page.

fixture `MyFixture`
    .page `https://devexpress.github.io/testcafe/example/`;
test
    .page `https://devexpress.github.io/testcafe/blog/`;
    ('My test', async t => {
    // Starts at http://devexpress.github.io/testcafe/blog/
});

For example, here, you can specify a start page for individual tests with a test.page function that overrides the fixture.page.

In this case, if you are passing a page with this URL with the fixture, that means that all the tests will use it until we use the test.page and this URL will override the previous URL with the fixture. So we need to take care of this one - test.page will override the fixture.page.

# Specify the Start Webpage Demo

In this demo, we will learn how to specify the start webpage with the test cases. We will continue working with our previous example - firstTest.js.

As we mentioned in our slides, we can pass the page with the fixture, but that means that all the tests inside this fixture or with this fixture will use the same page - but what if we have one test and we need to use a specific URL for this test?

So in our demo, we will copy this URL for example - [https://devexpress.github.io/testcafe/example/](https://devexpress.github.io/testcafe/example/) - and then go to the test, and like fixture.page webpage, we can add test.page, and here we have a page. Then we can pass the URL as a string with test.page and pass the example. And then, for example, here, we can just open the main page for testcafe, and after that with our test, we are overriding this page and opening the example to be able to continue with the test case.

fixture("First Fixture")
    .page("http://devexpress.github.io/testcafe/");

test.page("https://devexpress.github.io/testcafe/example/")
("First Test", async t =>{
    await t
        .typeText("#developer-name","TAU")
        .click("#macos")
        .click("#submit-button");
});

We can run our test with testcafe on the command line with Chrome browser, with our tests package and firstTest.js

testcafe chrome tests/firstTest.js

After that, we can run our test.

Testcafe will initialize and run the local server, redirect to the URL, and we will notice that we will redirect to the example URL, not the main URL for that fixture webpage and the test is successful.

For example, also, if we can change the fixture.page - maybe we can add the Google website and save the changes - we'll be able to ensure that we are redirected to the test.page URL.

fixture("First Fixture")
    .page("http://www.google.com");

test.page("https://devexpress.github.io/testcafe/example/")
("First Test", async t =>{
    await t
        .typeText("#developer-name","TAU")
        .click("#macos")
        .click("#submit-button");
});

So again, we will run our test, and then we will check.

The local server is opened. Testcafe will redirect to the URL, and again, we are redirected to the example URL.

So when we are specifying the URL, test.page overrides fixture.page. But if we don't have any test.page - for example, if we remove the .page for test, and save the changes and run our test, our test will use the page from the fixture.

Also, it will fail because "google.com" does not include these elements.

fixture("First Fixture")
    .page("http://www.google.com");

test
("First Test", async t =>{
    await t
        .typeText("#developer-name","TAU")
        .click("#macos")
        .click("#submit-button");
});

So we have opened the local server, redirected to that Google URL, and then our test will fail because now we are still waiting for the element to be displayed in the DOM, but we don't have any elements on this page because this is the wrong page.

Testcafe fails now, and the failure is in typeText. There is not any selector with #developer-name. So the specified selector doesn't match any element in the DOM tree.

So in this demo, we tried to specify the page or URL with the test.page.

Resources

Quiz

The quiz for this chapter can be found in 4.10

Add AI to your existing test scripts in minutes!