Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add info about the file:// protocol to a recipe #1255

Merged
merged 4 commits into from Mar 24, 2017
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 32 additions & 14 deletions docs/articles/documentation/recipes/test-static-html-pages.md
Expand Up @@ -5,39 +5,57 @@ permalink: /documentation/recipes/test-static-html-pages.html
---
# Test Static HTML Pages

There are many ways to test your static HTML pages using TestCafe, but in this recipe we will focus on a simple one that uses a few other packages and can be easily integrated into your workflow. To do this, go through the following steps.
There are many ways to test your static HTML pages using TestCafe, but in this recipe
we will focus on two simple methods that use a few other packages and can be easily integrated into your workflow.

* [Step 1 - Install TestCafe and create tests](#step-1---install-testcafe-and-create-tests)
* [Step 2 - Install http-server](#step-2---install-http-server)
* [Step 3 - Add the `test` script to package.json](#step-3---add-the-test-script-to-packagejson)
* [Install TestCafe and create tests](#install-testcafe-and-create-tests)
* [Option 1 - Use the file:// protocol](#option-1---use-the-file-protocol)
* [Option 2 - Use a local HTTP server](#option-2---use-a-local-http-server)

## Step 1 - Install TestCafe and create tests
## Install TestCafe and create tests

Install TestCafe [locally](../using-testcafe/installing-testcafe.md#locally) in your project and [create tests](../getting-started/README.md#creating-a-test).

## Step 2 - Install http-server
## Option 1 - Use the file:// protocol

Install [http-server](https://github.com/indexzero/http-server) that will be used as a local server.
[Specify the target webpage](../test-api/test-code-structure.md#specifying-the-start-webpage) using the `file://` protocol.

```js
fixture `My fixture`
.page `file:///user/my-website/index.html`
```

## Step 3 - Add the `test` script to package.json
Add a command that runs tests to the `package.json` file.

```json
"scripts": {
"test": "testcafe chrome ./test/acceptance/**"
}
```

This script runs tests from the `./test/acceptance/` directory in Chrome.

## Option 2 - Use a local HTTP server

Install [http-server](https://github.com/indexzero/http-server) that will be used as a local server.

The default test script, for Node.js projects is `npm test`.
To tell npm how to run your tests, add the `test` script to the project's package.json file.
Use the `--app` TestCafe option to provide a command that starts the local server.
This command will be automatically executed before running tests. After tests are finished, TestCafe will stop the server.

Add the following code to `package.json`.

```json
"scripts": {
"test": "testcafe chrome ./test/acceptance/** --app \"http-server ./dist -s\""
"test": "testcafe chrome ./test/acceptance/** --app \"http-server ./my-website -s\""
}
```

This script contains the following commands.

1. `"http-server ./dist -s"` - starts the local server at port `8080` with files from the `./dist` folder in silent mode.
The contents of the`./dist` folder will be served at `http://localhost:8080`. So, if you want to test the `./dist/dir/page.html` page,
1. `"http-server ./my-website -s"` - starts the local server at port `8080` with files from the `./my-website` folder in silent mode.
The contents of the `./my-website` folder will be served at `http://localhost:8080`. So, if you want to test the `./my-website/dir/page.html` page,
use `fixture('...').page('http://localhost:8080/dir/page.html')` in your fixture file.

2. `"testcafe chrome ./test/acceptance/**"` - runs TestCafe tests from the `./test/acceptance` folder in Chrome after the server starts
2. `"testcafe chrome ./test/acceptance/**"` - runs TestCafe tests from the `./test/acceptance` directory in Chrome after the server starts

For more information on how to configure a test run using a `testcafe` command, see [Command Line Interface](../using-testcafe/command-line-interface.md).
7 changes: 7 additions & 0 deletions docs/articles/documentation/test-api/test-code-structure.md
Expand Up @@ -231,6 +231,13 @@ test

If the start page is not specified, it defaults to `about:blank`.

To test webpages in local directories, you can use the `file://` protocol.

```js
fixture `MyFixture`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK, we can use relative path as well.

    fixture `MyFixture`
        .page `../my-website/index.html`;

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@LavrovArtem is it true?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@VasilyStrelyaev I think this question is about testcafe but not testcafe-hammerhead. I don't know how it works in testcafe.
@AndreyBelym ping

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Relative to what it will be then in your opinion?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be relative to current test file, e.g. if i have .html pages for every test and i store them in repository.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, you speaking about file: protocol, your example shows URL. If so, yes, it would be nice to have relative path support (I suppose we don't have one at the moment)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use relative paths for pages only in legacy API if you have specified baseUrl in test_config.json. Currently you can only skip protocol from URL, in this case it's assumed to be http://. So relative file-protocol URLs certainly don't work now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.page `file:///user/my-website/index.html`;
```

## Initialization and Clean-Up

TestCafe allows you to specify functions that will be executed before a fixture or test is started and after it is finished.
Expand Down