Visit a page with Cypress
In order to test our application, Cypress will need to visit it in the browser. In this lesson we’ll see how we can visit our application with Cypress and how to configure a baseUrl for Cypress to make that even easier.
Instructor: [00:00] Here we have a new spec file with an empty describe block in the cypress/integration directory of this project. Let's add a new test by adding an it block. In order for us to test anything in our application, the first thing we need Cypress to do is visit our application. For now, let's just make the description "Visits the app."
[00:19] Cypress exposes a global object called "cy." This gives us access to all the commands in the Cypress API.
[00:26] One of those commands is visit. I'm going to type "cy.visit." Then into visit I'm going to pass in the URL of our application. For now, it's going to be localhost:3030.
[00:42] I'm going to save the spec, then down in the terminal, we need to do two things. In order for Cypress to hit our application by visiting this URL, we need our application to run. I'm going to use npm run dev, which is going to run our npm script that builds and runs this application locally.
[01:01] I'm going to leave that running. Then in a second terminal pane, I'm going to run npm run cypress. This will open the Cypress UI.
[01:12] We'll see that our form-input.spec file is available. I'm going to click on that.
[01:20] This will run the Cypress runner in Chrome. This is going to visit our application. We'll see in the command log on the left that we have our visit with our address. We'll see our application is showing up on the right.
[01:31] We'll also see that an XHR call was made to api/todos, which is where our data is being loaded from. By running our application locally and using cy.visit, we have a real copy of our application running in an actual browser.
[01:44] Let's go back to our code. We're going to need to visit our application in all of our tests.
[01:50] Let's simplify this. We're going to take this long address, this localhost:3030. I'm going to cut that out of here. I'm going to find, in the root of the project, cypress.json.
[02:00] I'm going to add a new property to this called baseURL. baseURL is going to get that value that I just copied. That's going to be our localhost:3030. I'm going to save that.
[02:15] Then back in my test, I'm going to change my cy.visit. Instead of giving it the entire URL, I'm just going to give it a forward slash. We can save that. I'm going to switch back to Cypress.
[02:27] Because we changed the config, it stopped our test. We'll run this again by clicking form-input.spec.
[02:34] We'll see [inaudible] our visit. It's forward slash. We're still loading our application.
cold not get this to cy.visit(). Had to blow out node_modules, npm install with latest versions: this works: "dependencies": { "axios": "^0.19.2", "concurrently": "^5.1.0", "json-server": "^0.16.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2" }, "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^8.1.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "css-loader": "^3.4.2", "cypress": "^4.2.0", "html-webpack-plugin": "^3.2.0", "style-loader": "^1.1.3", "webpack": "^4.42.0", "webpack-cli": "^3.3.11" } then had to edit webpack.config.js CHANGE module: { loaders: [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules/ } ] }, TO module: { rules: [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules/ } ] }, after this everything works...
cy.visit() does not work for me neither. It print {} on the screen instead show the test.
it works by updating dependencies as Cliff Smith suggested
Hi! If any of you guys have 404 issue launching browser while
cypress openyou can try add this lines to yourcypress/plugins/index.jsfile in the project directory:module.exports = (on, config) => { on('before:browser:launch', (browser = {}, args) => { if (browser.name === 'chrome') { // ^ make sure this is your browser name, you may // be using 'canary' or 'chromium' for example, so change it to match! args.push('--proxy-bypass-list=<-loopback>'); return args; } }); };