Automation Testing

How can we submit a form without click method?

The click() and submit() functions are quite similar in terms of functionalities. However there are minor differences. Let us discuss some differences between them.

The submit() function is applicable only for <form> and makes handling of form easier. It can be used with any element inside a form. The click() is only applicable to buttons with type submit in a form.

The submit() function shall wait for the page to load however the click() waits only if any explicit wait condition is provided. If a form has a submit of type button, the submit() method cannot be used. Also, if a button is outside <form>, then submit() will not work.

Thus we see that click() works for both type buttons irrespective of the fact that the button is inside or outside of <form>. Let us take up the below form for implementation.

package com.test.traveltest;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class SubmitForm {

	@SuppressWarnings("deprecation")
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
		System.setProperty("webdriver.chrome.driver", System.getProperty("user.dir")+"\\src\\main\\java\\drivers\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();
	      String url = "https://www.facebook.com/";
	      driver.get(url);
	      driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
	      // identify elements
	      driver.findElement(By.id("email")).sendKeys("abc@gmail.com");
	      driver.findElement(By.id("pass")).sendKeys("123456");
	      // submitting form with submit()
	      driver.findElement(By.id("pass")).submit();
	      driver.quit();

	}
ChatGPT

Using ChatGPT for creating a website and adding CSS…

RK: can you create a website in html having home page, contact us page, about us page

AI: Sure! Here is a simple HTML code for a website with a home page, a contact us page, and an about us page:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to my website!</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About Us</h1>
<p>Learn more about us and what we do.</p>
</section>
<section id="contact">
<h1>Contact Us</h1>
<p>Get in touch with us.</p>
</section>
</main>
<footer>
<p>Copyright &copy; 2023 My Website</p>
</footer>
</body>
</html>

This is just a simple example, you can further style and customize it according to your needs and preferences.

RK: add some css to this

AI: Sure! Here’s an example of how you could add some basic CSS styles to the previous HTML code:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
padding: 1em 0;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin: 0 1em;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 1em;
}
section {
background-color: #f2f2f2;
border: 1px solid #333;
box-sizing: border-box;
padding: 1em;
width: 30%;
}
footer {
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
padding: 1em 0;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to my website!</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About Us</h1>
<p>Learn more about us and what we do.</p>
</section>
<section id="contact">
<h1>Contact Us</h1>
<p>Get in touch with us.</p>
</section>
</main>
<footer>
<p>Copyright &copy; 2023 My Website</p>
</footer>
</body>
</html>

Above image shows the Output for script generated by ChatGPT

This example just gives you a basic idea of how to add CSS styles to an HTML document. You can further customize it according to your needs and preferences.