diff --git a/cypress.json b/cypress.json
index 17ef242e..0b378fff 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,3 +1,4 @@
 {
-  "baseUrl": "http://localhost:3000"
+  "baseUrl": "http://localhost:3000",
+  "chromeWebSecurity": false
 }
diff --git a/cypress/integration/test.spec.js b/cypress/integration/test.spec.js
new file mode 100644
index 00000000..7a5fdbf8
--- /dev/null
+++ b/cypress/integration/test.spec.js
@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+
+describe("HomaPage", () => {
+    it("PFTP site",() => {
+        cy.visit("http://localhost:3000")
+        cy.wait(5000)
+        cy.get('[data-test-id="continue-next"]').click().then(() => {
+            cy.get('[data-test-id="test-firstName"]').type("rish")
+            cy.get('[data-test-id="test-lastName"]').type("singh")
+            cy.get('[data-test-id="test-email"]').type("my@e.com")
+            cy.get('[data-test-id="test-address"]').type("abcd")
+            cy.get('[data-test-id="test-city"]').type("mumbai")
+            cy.get('[data-test-id="test-zipCode"]').type("401107")
+            cy.get('[data-test-id="test-continueToPayment"]').click().then(() => {
+                cy.get('#card-element').within(() => {
+                    cy.fillElementsInput('cardNumber', '4242424242424242');
+                    cy.fillElementsInput('cardExpiry', '1025'); // MMYY
+                    cy.fillElementsInput('cardCvc', '123');
+                  });
+                cy.get('[data-test-id="test-donateButton"]').click()
+            })
+            
+        })
+        
+    });
+
+    
+})
\ No newline at end of file
diff --git a/cypress/support/index.js b/cypress/support/index.js
index d68db96d..d9df2e7b 100644
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import 'cypress-plugin-stripe-elements';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/package-lock.json b/package-lock.json
index 2bb47398..b3109b42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2003,6 +2003,12 @@
         }
       }
     },
+    "cypress-plugin-stripe-elements": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cypress-plugin-stripe-elements/-/cypress-plugin-stripe-elements-1.0.1.tgz",
+      "integrity": "sha512-GLofWHUWkl/efX8IHlsA6BxtizdAPucwHpAYb3k0mr/ZqCTi+4xbv4Ab9P9YmsacHxCckemylJe3Q6QklZihhw==",
+      "dev": true
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
diff --git a/package.json b/package.json
index f6f66f49..2889ea60 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "cypress": "^6.8.0",
+    "cypress-plugin-stripe-elements": "^1.0.1",
     "eslint": "^7.23.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.1.0",
diff --git a/src/Donations/Components/ContactsForm.tsx b/src/Donations/Components/ContactsForm.tsx
index b303b629..54c17e43 100644
--- a/src/Donations/Components/ContactsForm.tsx
+++ b/src/Donations/Components/ContactsForm.tsx
@@ -80,6 +80,7 @@ function ContactsForm({}: Props): ReactElement {
                 variant="outlined"
                 name="firstname"
                 defaultValue={contactDetails.firstname}
+                data-test-id="test-firstName"
               />
               {errors.firstname && (
                 <span className={"form-errors"}>{t("firstNameRequired")}</span>
@@ -93,6 +94,7 @@ function ContactsForm({}: Props): ReactElement {
                 variant="outlined"
                 name="lastname"
                 defaultValue={contactDetails.lastname}
+                data-test-id="test-lastName"
               />
               {errors.lastname && (
                 <span className={"form-errors"}>{t("lastNameRequired")}</span>
@@ -111,6 +113,7 @@ function ContactsForm({}: Props): ReactElement {
               variant="outlined"
               name="email"
               defaultValue={contactDetails.email}
+              data-test-id="test-email"
             />
             {errors.email && (
               <span className={"form-errors"}>{t("emailRequired")}</span>
@@ -124,6 +127,7 @@ function ContactsForm({}: Props): ReactElement {
               variant="outlined"
               name="address"
               defaultValue={contactDetails.address}
+              data-test-id="test-address"
             />
             {errors.address && (
               <span className={"form-errors"}>{t("addressRequired")}</span>
@@ -138,6 +142,7 @@ function ContactsForm({}: Props): ReactElement {
                 variant="outlined"
                 name="city"
                 defaultValue={contactDetails.city}
+                data-test-id="test-city"
               />
               {errors.city && (
                 <span className={"form-errors"}>{t("cityRequired")}</span>
@@ -155,6 +160,7 @@ function ContactsForm({}: Props): ReactElement {
                   variant="outlined"
                   name="zipCode"
                   defaultValue={contactDetails.zipCode}
+                  data-test-id="test-zipCode"
                 />
               )}
               {errors.zipCode && (
@@ -249,6 +255,7 @@ function ContactsForm({}: Props): ReactElement {
             <button
               onClick={handleSubmit(onSubmit)}
               className={"primary-button mt-30"}
+              data-test-id="test-continueToPayment"
             >
               {t("continue")}
             </button>
diff --git a/src/Donations/PaymentMethods/CardPayments.tsx b/src/Donations/PaymentMethods/CardPayments.tsx
index 4ee7f65a..b8009931 100644
--- a/src/Donations/PaymentMethods/CardPayments.tsx
+++ b/src/Donations/PaymentMethods/CardPayments.tsx
@@ -187,7 +187,7 @@ function CardPayments({
       {paymentError && <div className={"paymentError"}>{paymentError}</div>}
 
       {
-        <div>
+        <div id="card-element">
           <FormControlNew variant="outlined">
             <CardNumberElement
               id="cardNumber"
@@ -220,6 +220,7 @@ function CardPayments({
           onClick={handleSubmit}
           className="primary-button w-100 mt-30"
           id="donateContinueButton"
+          data-test-id="test-donateButton"
         >
           {t("donate")}{" "}
           {totalCost}
diff --git a/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx b/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx
index d549d7ce..da3f6d46 100644
--- a/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx
+++ b/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx
@@ -165,7 +165,7 @@ export const PaymentRequestCustomButton = ({
       ) : null}
 
       {!isPaymentPage && (
-        <button onClick={() => continueNext()} className="primary-button">
+        <button data-test-id="continue-next" onClick={() => continueNext()} className="primary-button">
           {canMakePayment ? t("payPalCard") : t("continue")}
         </button>
       )}
diff --git a/tsconfig.json b/tsconfig.json
index 217fe155..823edf00 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "types": ["cypress", "cypress-plugin-stripe-elements"]
   },
   "exclude": ["node_modules"],
   "include": [