From 8a0ddbd15005765ba9d382acf45eeb448a6cc32f Mon Sep 17 00:00:00 2001 From: Hammad1007 Date: Mon, 22 Jan 2024 13:14:08 +0500 Subject: [PATCH 1/3] Install cypress and write teh E2E tests --- github-profiles/cypress.config.js | 9 ++ github-profiles/cypress/e2e/test.spec.cy.js | 123 ++++++++++++++++++ github-profiles/cypress/fixtures/example.json | 5 + github-profiles/cypress/support/commands.js | 27 ++++ github-profiles/cypress/support/e2e.js | 20 +++ 5 files changed, 184 insertions(+) create mode 100644 github-profiles/cypress.config.js create mode 100644 github-profiles/cypress/e2e/test.spec.cy.js create mode 100644 github-profiles/cypress/fixtures/example.json create mode 100644 github-profiles/cypress/support/commands.js create mode 100644 github-profiles/cypress/support/e2e.js diff --git a/github-profiles/cypress.config.js b/github-profiles/cypress.config.js new file mode 100644 index 0000000..97f47c4 --- /dev/null +++ b/github-profiles/cypress.config.js @@ -0,0 +1,9 @@ +const { defineConfig } = require("cypress"); + +module.exports = defineConfig({ + e2e: { + setupNodeEvents(on, config) { + // implement node event listeners here + }, + }, +}); diff --git a/github-profiles/cypress/e2e/test.spec.cy.js b/github-profiles/cypress/e2e/test.spec.cy.js new file mode 100644 index 0000000..17c97f6 --- /dev/null +++ b/github-profiles/cypress/e2e/test.spec.cy.js @@ -0,0 +1,123 @@ +// Function to check if body is visible +function isVisible() { + it('The body is visible', () => { + cy.get('body').should('be.visible') + }) +} + +describe('Project Github Profiles', () => { + beforeEach(() => { + cy.visit('http://127.0.0.1:5500/github-profiles/index.html') + }) + + it('Opens the home page', () => { + + }) + + it('The body is visible', () => { + isVisible() + }) + + context('Body', () => { + context('Background', () => { + it('The background is visible', () => { + isVisible() + }) + + it('The background color is correct', () => { + cy.get('body').should('be.visible').should('have.css', 'background-color', 'rgb(42, 42, 114)') + }) + + context('The Search Bar', () => { + context('Search bar', () => { + it('The search bar is visible', () => { + cy.xpath('//form[@class="user-form"]').should('be.visible') + }) + + it('The search bar has visible background color', () => { + cy.xpath('//*[@id="search"]').should('be.visible').should('have.css', 'background-color', 'rgb(76, 40, 133)') + }) + + it('The search bar has visible placeholder text', () => { + cy.xpath('//*[@id="search"]').should('be.visible').should('have.attr', 'placeholder', 'Search a Github User') + }) + + it('The search bar placeholder text has correct color', () => { + cy.xpath('//*[@id="search"]').should('be.visible').should('have.attr', 'placeholder', 'Search a Github User').should('have.css', 'color', 'rgb(255, 255, 255)') + }) + + it('The search bar is clickable', () => { + cy.xpath('//form[@class="user-form"]').should('be.visible').click() + }) + + it('The user when enters a correct name gets the result', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.get('.user-info').should('be.visible') + }) + + context('Correct User Card', () => { + it('The card has correct background color', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.get('.user-info').should('be.visible').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)') + }) + + context('Card', () => { + context('Image', () => { + it('The image of the user is visible', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div/div[1]/img').should('be.visible') + }) + }) + + context('Text', () => { + it('The card content is visible', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div').should('be.visible') + }) + + context('Heading', () => { + it('The heading text is visible', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div/div[2]/h2').should('be.visible') + }) + + it('The heading text is correct', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div/div[2]/h2').should('be.visible').should('have.text', 'Hammad Rashid') + }) + + it('The color of the text is correct', () => { + cy.get('#search').should('be.visible').click().type('Hammad1007') + cy.get('#form').submit() + cy.wait(10) + cy.xpath('/html/body/main/div/div[2]/h2').should('be.visible').should('have.css', 'color', 'rgb(238, 238, 238)') + }) + }) + }) + }) + }) + + context('Incorrect User Card', () => { + it('Invalid input results in no result', () => { + cy.get('#search').should('be.visible').click().type('qwerty') + cy.get('#form').submit() + cy.wait(10) + cy.get('.user-info').should('not.be.visible') + }) + }) + }) + }) + }) + }) +}) \ No newline at end of file diff --git a/github-profiles/cypress/fixtures/example.json b/github-profiles/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/github-profiles/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" +} diff --git a/github-profiles/cypress/support/commands.js b/github-profiles/cypress/support/commands.js new file mode 100644 index 0000000..cc02d1e --- /dev/null +++ b/github-profiles/cypress/support/commands.js @@ -0,0 +1,27 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add('login', (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) + +import 'cypress-xpath'; \ No newline at end of file diff --git a/github-profiles/cypress/support/e2e.js b/github-profiles/cypress/support/e2e.js new file mode 100644 index 0000000..0e7290a --- /dev/null +++ b/github-profiles/cypress/support/e2e.js @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/e2e.js 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 './commands' + +// Alternatively you can use CommonJS syntax: +// require('./commands') \ No newline at end of file From 8f4bc1be64862ef7890947a4d53d1e0f6f7883b8 Mon Sep 17 00:00:00 2001 From: Hammad1007 Date: Mon, 22 Jan 2024 18:48:38 +0500 Subject: [PATCH 2/3] Install selenium and write selenium tests --- .../tests/body/searchbar/test_searchbar.py | 27 +++++++++++++++ .../searchbar/test_searchbar_placeholder.py | 29 ++++++++++++++++ .../body/searchbar/test_searchbar_search.py | 33 +++++++++++++++++++ github-profiles/tests/body/test_body.py | 31 +++++++++++++++++ github-profiles/tests/test_body.py | 26 +++++++++++++++ github-profiles/tests/test_browser.py | 22 +++++++++++++ 6 files changed, 168 insertions(+) create mode 100644 github-profiles/tests/body/searchbar/test_searchbar.py create mode 100644 github-profiles/tests/body/searchbar/test_searchbar_placeholder.py create mode 100644 github-profiles/tests/body/searchbar/test_searchbar_search.py create mode 100644 github-profiles/tests/body/test_body.py create mode 100644 github-profiles/tests/test_body.py create mode 100644 github-profiles/tests/test_browser.py diff --git a/github-profiles/tests/body/searchbar/test_searchbar.py b/github-profiles/tests/body/searchbar/test_searchbar.py new file mode 100644 index 0000000..6d96033 --- /dev/null +++ b/github-profiles/tests/body/searchbar/test_searchbar.py @@ -0,0 +1,27 @@ +from selenium import webdriver +import time +from selenium.webdriver.chrome.service import Service +from selenium.webdriver.common.by import By +from selenium.webdriver.common.keys import Keys +from selenium.webdriver.chrome.options import Options + +# Define Chrome WebDriver options +chrome_options = Options() +service = Service('/Users/mac005/Downloads/chromedriver-mac-arm64/chromedriver') + +# Initialize Chrome WebDriver +driver = webdriver.Chrome(service=service, options=chrome_options) + +driver.get('http://127.0.0.1:5500/github-profiles/index.html') + +element = driver.find_element(By.XPATH, '//form[@class="user-form"]') + +time.sleep(3) + +if element: + print('Search bar is visible') +else: + print('Search bar not visible') + +# Close the browser window +driver.quit() \ No newline at end of file diff --git a/github-profiles/tests/body/searchbar/test_searchbar_placeholder.py b/github-profiles/tests/body/searchbar/test_searchbar_placeholder.py new file mode 100644 index 0000000..29a84d4 --- /dev/null +++ b/github-profiles/tests/body/searchbar/test_searchbar_placeholder.py @@ -0,0 +1,29 @@ +from selenium import webdriver +import time +from selenium.webdriver.chrome.service import Service +from selenium.webdriver.common.by import By +from selenium.webdriver.common.keys import Keys +from selenium.webdriver.chrome.options import Options + +# Define Chrome WebDriver options +chrome_options = Options() +service = Service('/Users/mac005/Downloads/chromedriver-mac-arm64/chromedriver') + +# Initialize Chrome WebDriver +driver = webdriver.Chrome(service=service, options=chrome_options) + +driver.get('http://127.0.0.1:5500/github-profiles/index.html') + +element = driver.find_element(By.XPATH, '//*[@id="search"]') + +placeholder_text = element.get_attribute('placeholder') + +time.sleep(3) + +if placeholder_text: + print('Placedholder text is visible') +else: + print('Placedholder text not visible') + +# Close the browser window +driver.quit() \ No newline at end of file diff --git a/github-profiles/tests/body/searchbar/test_searchbar_search.py b/github-profiles/tests/body/searchbar/test_searchbar_search.py new file mode 100644 index 0000000..379a2d3 --- /dev/null +++ b/github-profiles/tests/body/searchbar/test_searchbar_search.py @@ -0,0 +1,33 @@ +from selenium import webdriver +import time +from selenium.webdriver.chrome.service import Service +from selenium.webdriver.common.by import By +from selenium.webdriver.common.keys import Keys +from selenium.webdriver.chrome.options import Options +from selenium.webdriver.common.desired_capabilities import DesiredCapabilities +from selenium.webdriver.support.ui import WebDriverWait +from selenium.webdriver.support import expected_conditions as EC + +# Define Chrome WebDriver options +chrome_options = Options() +service = Service('/Users/mac005/Downloads/chromedriver-mac-arm64/chromedriver') + +# Initialize Chrome WebDriver +driver = webdriver.Chrome(service=service, options=chrome_options) + +driver.get('http://127.0.0.1:5500/github-profiles/index.html') + +element = driver.find_element(By.XPATH, '//*[@id="search"]') + +element.send_keys('Hammad1007') +element.send_keys(Keys.ENTER) + +wait = WebDriverWait(driver, 10) +main_element = wait.until(EC.presence_of_element_located((By.ID, 'main'))) + +time.sleep(3) + +print('Success!') + +# Close the browser window +driver.quit() \ No newline at end of file diff --git a/github-profiles/tests/body/test_body.py b/github-profiles/tests/body/test_body.py new file mode 100644 index 0000000..587e1b8 --- /dev/null +++ b/github-profiles/tests/body/test_body.py @@ -0,0 +1,31 @@ +from selenium import webdriver +import time +from selenium.webdriver.chrome.service import Service +from selenium.webdriver.common.by import By +from selenium.webdriver.common.keys import Keys +from selenium.webdriver.chrome.options import Options + +# Define Chrome WebDriver options +chrome_options = Options() +service = Service('/Users/mac005/Downloads/chromedriver-mac-arm64/chromedriver') + +# Initialize Chrome WebDriver +driver = webdriver.Chrome(service=service, options=chrome_options) + +driver.get('http://127.0.0.1:5500/github-profiles/index.html') + +element = driver.find_element(By.TAG_NAME, 'body') + +background_color = element.value_of_css_property('background-color') + +time.sleep(3) + +if element: + print('Body is visible') +else: + print('Body not visible') + +print(f'The body background color is {background_color}') + +# Close the browser window +driver.quit() \ No newline at end of file diff --git a/github-profiles/tests/test_body.py b/github-profiles/tests/test_body.py new file mode 100644 index 0000000..a54faa9 --- /dev/null +++ b/github-profiles/tests/test_body.py @@ -0,0 +1,26 @@ +from selenium import webdriver +import time +from selenium.webdriver.chrome.service import Service +from selenium.webdriver.common.by import By +from selenium.webdriver.common.keys import Keys +from selenium.webdriver.chrome.options import Options + +# Define Chrome WebDriver options +chrome_options = Options() +service = Service('/Users/mac005/Downloads/chromedriver-mac-arm64/chromedriver') + +# Initialize Chrome WebDriver +driver = webdriver.Chrome(service=service, options=chrome_options) + +driver.get('http://127.0.0.1:5500/github-profiles/index.html') + +element = driver.find_element(By.TAG_NAME, 'body') + +time.sleep(3) + +if element: + print('Body is visible') +else: + print('Body not visible') +# Close the browser window +driver.quit() \ No newline at end of file diff --git a/github-profiles/tests/test_browser.py b/github-profiles/tests/test_browser.py new file mode 100644 index 0000000..63b5ba5 --- /dev/null +++ b/github-profiles/tests/test_browser.py @@ -0,0 +1,22 @@ +from selenium import webdriver +import time +from selenium.webdriver.chrome.service import Service +from selenium.webdriver.common.by import By +from selenium.webdriver.common.keys import Keys +from selenium.webdriver.chrome.options import Options + +# Define Chrome WebDriver options +chrome_options = Options() +service = Service('/Users/mac005/Downloads/chromedriver-mac-arm64/chromedriver') + +# Initialize Chrome WebDriver +driver = webdriver.Chrome(service=service, options=chrome_options) + +driver.get('http://127.0.0.1:5500/github-profiles/index.html') + +time.sleep(3) + +print('Homepage opens up') + +# Close the browser window +driver.quit() \ No newline at end of file From f755f8058c47b224a77a8612432ecca3490ae942 Mon Sep 17 00:00:00 2001 From: Hammad1007 Date: Mon, 22 Jan 2024 18:49:46 +0500 Subject: [PATCH 3/3] Update selenium test for search --- github-profiles/tests/body/searchbar/test_searchbar_search.py | 1 - 1 file changed, 1 deletion(-) diff --git a/github-profiles/tests/body/searchbar/test_searchbar_search.py b/github-profiles/tests/body/searchbar/test_searchbar_search.py index 379a2d3..1469ff5 100644 --- a/github-profiles/tests/body/searchbar/test_searchbar_search.py +++ b/github-profiles/tests/body/searchbar/test_searchbar_search.py @@ -29,5 +29,4 @@ time.sleep(3) print('Success!') -# Close the browser window driver.quit() \ No newline at end of file