init

cypress/e2e/SeoMetadata.cy.ts

@@ -0,0 +1,27 @@
+describe('Seo metadata', () => {
+  describe('Verify SEO Metadata', () => {
+    it('should render SEO metadata on Index page', () => {
+      cy.visit('/');
+
+      // The Index page should have a page title
+      cy.title().should('not.be.empty');
+
+      // The Index page should also contain a meta description for SEO
+      cy.get('head meta[name="description"]')
+        .invoke('attr', 'content')
+        .should('not.be.empty');
+    });
+
+    it('should render SEO metadata on About page', () => {
+      cy.visit('/about');
+
+      // The About page should have a page title
+      cy.title().should('not.be.empty');
+
+      // The About page should also contain a meta description for SEO
+      cy.get('head meta[name="description"]')
+        .invoke('attr', 'content')
+        .should('not.be.empty');
+    });
+  });
+});

cypress/e2e/navigation.cy.ts

@@ -0,0 +1,25 @@
+describe('Navigation', () => {
+  describe('Static pages', () => {
+    it('should navigate to the about page', () => {
+      // Start from the index page
+      cy.visit('/');
+
+      // The index page should contain an h1
+      cy.findByRole('heading', {
+        name: 'Boilerplate code for your Nextjs project with Tailwind CSS',
+      });
+
+      // Find a link containing "About" text and click it
+      cy.findByRole('link', { name: 'About' }).click();
+
+      // The new url should include "/about"
+      cy.url().should('include', '/about');
+
+      // The new page should contain two "lorem ipsum" paragraphs
+      cy.findAllByText('Lorem ipsum dolor sit amet', { exact: false }).should(
+        'have.length',
+        2
+      );
+    });
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/e2e.ts

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import '@testing-library/cypress/add-commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["node", "cypress", "@testing-library/cypress"],
+
+    "isolatedModules": false
+  },
+  "include": ["**/*.cy.ts"],
+  "exclude": []
+}