Pytest Tutorial

Pytest Introduction

Pytest is a python based testing framework, which is used to write and execute test codes.
Pytest has its own way to detect the test file and test functions automatically.
Because of its simple syntax, pytest is very easy to start with.
To install the latest version of pytest, execute the following command: pip install pytest
Pytest requires the test function names to start with test.
We cannot explicitly make pytest consider any function not starting with test as a test function.
Running pytest without mentioning a filename will run all files of format test_*.py in the current directory and subdirectories.

test_first_example.py

import math

def test_sqrt():
   num = 64
   assert math.sqrt(num) == 8

def testsquare():
   num = 6
   assert 6*6 == 36

def testequality():
   assert "hi" == "hi"

test_second_example.py

def test_greater():
   num = 100
   assert num > 100

def test_greater_equal():
   num = 100
   assert num >= 100

def test_less():
   num = 100
   assert num > 200

Procedural Program Testing

tables.py

# output : 5th table 5X1,  5X10, 10values
# procedural program [without functions, without classes]
num = 5

for x in range(1,11):
     print(f'{num} X {x} = {num*x}')

test_procedural_program.py

import subprocess

output = subprocess.check_output("python tables.py")
output2 = output.decode()
output3 = output2.split("\n")

def test_first_line():
    output4 = output3[0].rstrip("\r")
    assert "5 X 1" in output4

def test_last_line():
    output5 = output3[9].rstrip("\r")
    assert output5 == "5 X 10 = 50"

def test_length():
    assert len(output3)-1 == 10

def test_type():
    assert type(output2).__name__ == "str"

Functional Program Testing

tables_functions.py

# output : 7th table 7X1,  7X10, 10values, fun call generator
# functional program [with functions, without classes]

def print_tables(num):
    for value in range(1, 11):
        yield f'{num} X {value} = {num*value}'      # generator

if __name__ == "__main__":
    output = print_tables(7)
    name = "abhishek"
    surname = "kotha"
    print(name,surname, name,surname,sep="\n")

test_tables_functions.py

import tables_functions as chintu
import re

result = chintu.print_tables(10)    #this is a generator object
result2 = list(result)  #converting generator object into a list

def test_legth():
    assert len(result2) is 10       # we can use == or is

def test_type():
    assert type(result).__name__ == "generator"

def test_using_regular_expression():
    for abhi in result2:
        assert re.match('([0-9]{1,2}.X.[0-9]{1,2}.=.[0-9]{1,2}).?',abhi)    #regular expression

Class Program Testing

tables_class_example.py

#class program testing

class print_tables:
    def __init__(self, num):
        self.num = num

    def print_table(self):
        f = open("output.txt", 'w')
        for value in range(1, 11):
            print(f'{self.num} X {value} = {self.num*value}', file=f)

if __name__ == "__main__":
    obj = print_tables(3)
    obj.print_table()

test_class_example.py

from tables_class_example import  print_tables

def test_output_file():
    obj2 = print_tables(4)
    obj2.print_table()
    import os
    assert os.path.exists("output.txt")

def test_count_lines():
    f2 = open("output.txt","r")
    count = 0
    for line in f2:
        count += 1
    assert  count >=10

HTML Comments

Comment tags are used to insert comments in the HTML source code.
You can add comments to your HTML source by using the following syntax:

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 Hello Welcome To HTML Tutorials
 <!-- Write your comments here -->
 <!-- Programming Tutorials In Telugu -->
</body>
</html>

HTML Background

These are the attributes to change web page looking.
Attributes are used inside a tag and it follows att_name="value" format. Ex : text="red"
bgcolor attribute is used to change the background-color in a web page.
text attribute is used to change the text color in a web page.
background attribute is used to set an image as a background in a web page. Here we have to give the whole image url with extension.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body bgcolor="red" text="white">
 Hello Welcome To HTML Tutorials
</body>
</html>

<!DOCTYPE HTML>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body background="html1.png" text="yellow">
 Hello Welcome To HTML Tutorials
</body>
</html>

HTML Images

You can insert any image in your web page by using <img> tag.
The simple syntax to use this tag is <img src="Image URL" ... attributes-list/>
The src attribute is used to give the address of the image with extension.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
You can set image width and height based on your requirement using&n width and height attributes.
By default image will have a border around it, you can specify border thickness in terms of pixels/value using border attribute. A thickness of 0 means, no border around the picture.
By default image will align at the left side of the page, but you can use align attribute to set it in the center or right.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <img src="html.png" alt="HTML5" height="200" width="250">
 <img src="css3.png" alt="css3" height="200" width="250">
</body>
</html>

HTML Tables

The HTML tables allow to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td>tag is used to create data cells.
Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0".You can also set border color also using bordercolor attribute.
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell.
There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells.
cellpadding represents the distance between cell borders and the content within a cell.
The cellspacing attribute defines the width of the border.
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
bgcolor attribute is used to set background color for whole table or just for one cell.
background attribute is used to set background image for whole table or just for one cell.
You can set a table width and height using width and height attrubutes.
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
   <table border="2" cellpadding="3" cellspacing="3"
  bgcolor="aqua">
      <tr>
         <th colspan="3" bgcolor="red">Programming Tutorials</th>
      </tr>
      <tr>
         <td bgcolor="white">HTML</td>
      <td rowspan="4" bgcolor="orange">In Telugu</td>
      <td bgcolor="white">CSS</td>
      </tr>
      <tr>
      <td bgcolor="pink">SQL</td>
      <td bgcolor="pink">Java</td>
      </tr>
      <tr>
      <td bgcolor="lightgreen">JavaScript</td>
      <td bgcolor="lightgreen">Python</td>
      </tr>
      <tr>
      <td bgcolor="yellow">PHP</td>
      <td bgcolor="yellow">go</td>
      </tr>
 </table>
</body>
</html>

HTML Lists

HTML offers three ways for specifying lists of information. All lists must contain one or more list elements.
<ul> - An unordered list. This will list items using plain bullets.
The Unordered list starts with <ul> tag and list items start with the <li> tag.
You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. But you can change to square or circle or none.
<ol> - An ordered list. This will use different schemes of numbers to list your items.
The numbering starts at one and is incremented by one for each successive ordered list tagged with <li>.
You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number.
But you can change to Roman Numbers(I),Small roman numbers(i), alphabets(A), small aplhabets (a).
You can use start attribute for <ol> tag to specify the starting point of numbering you need.
<dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.
<dl> - Defines the start of the list.
<dt> - Defines a term.
<dd> - Defines term definition

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <h2>An Unordered HTML List</h2>
 <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
 </ul< 
 <h2>An Ordered HTML List</h2>
 <ol>
    <li>SQL</li>
    <li>Java</li>
    <li>Python</li>
 </ol>
 <h2>HTML Description Lists</h2>
 <dl>
   <dt>Coffee</dt>
     <dd>- black hot drink</dd>
    <dt>Milk</dt>
     <dd>- white cold drink</dd>
 </dl>
 </body>
</html>

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <ul type="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ul< 
 <ul type="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ul>
 <ol type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ol< 
 <ol type="i">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
 </ol>
</body>
</html>

HTML Links

A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a>tag and the closing </a> tag becomes part of the link.
Following is the simple syntax to use <a> tag.<a href="Document URL" ... attributes-list>Link Text</a>
target attribute is used to specify the location where linked document is opened. Possible options are
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body>tag.
You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple, you just need to give complete URL of the downloadable file.
It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
If you want to goto google
  <a href="http://www.google.com" target="_blank">Click Here</a>
</body>
</html>

HTML Fonts

Fonts play very important role in making a website more user friendly and increasing content readability.
HTML tag to add style, size, and color to the text on your website.
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
You can set font face using face attribute.
You can set font color using color attribute.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<font size="3" color="red">This is some text!</font> <br>
<font size="7" color="blue">This is some text!</font> <br>
<font face="verdana" color="green">This is some text!</font><br>
</body>
</html>

HTML Forms

HTML Forms are required when you want to collect some data from the site visitor.For example during user registration you would like to collect information such as name, email address, credit card, etc.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form.
Apart from common attributes, following is a list of the most frequently used form attributes:
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are GET and POST methods.
target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
There are different types of form controls that you can use to collect data using HTML form:
Those are:
Single-line text input controls <input type="text" name="name"/>
Password input controls <input type="password" name="pwd" />
Email input controls <input type="email" name="email" />
Number input controls <input type="number" name="number" />
Date input controls <input type="date" name="date" />
Multi-line input controls <textarea rows="5" cols="50" name="description"/>
Checkbox controls <input type="checkbox" name="m1" />
Radio Button controls <input type="radio" name="male" />
Select Box controls <select name="select" ><option value="Maths">Maths</option>
File upload box <input type="file" name="fileupload" accept="image/*" />
Button controls <input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
<input type="color" name="color" />
search <input type="search" name="search" />
url <input type="url" name="url" />
Some attributes of form controls size, maxlength, checked, multiple, placeholder, value, pattern

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<form action="html.html" method="get" target="_self">
  Name: <input type="text" name="fname"><br><br>
  Password: <input type="password" name="pwd">br><br>
  Email: <input type="email" name="email">
  Phone Number:<input type="number" name="number">
  DOB:<input type="date" name="date"> 
  Address:<textarea rows="5" cols="50" name="description">
  </textarea>
  Hobbies:<input type="checkbox" name="m1">
  Gender:<input type="radio" name="male">
  Branch:<select name="select" ><option value="cse">CSE</option>
  Photo:<input type="file" name="fileupload" accept="image/*">
  Search:<input type="search" name="search"> 
  url: <input type="url" name="url">
  <input type="submit" value="Submit">
  <input type="reset" name="reset" value="Reset"> 
  <input type="button" name="ok" value="OK">
  <input type="color" name="color"> 
</form>
</body>
</html>

HTML Marquee

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings.
This is created by using HTML <marquee> tag.
<marquee att_name="att_value".. more attributes> Text here </marquee>
Attributes are:
width This specifies the width of the marquee. This can be a value like 10 or 20% etc.
height This specifies the height of the marquee. This can be a value like 10 or 20% etc.
direction This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.
scrolldelay This specifies how long to delay between each jump. This will have a value like 10 etc.
scrollamount This specifies the speed of marquee text. This can have a value like 10 etc.
loop This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
bgcolor This specifies background color in terms of color name or color hex value.
hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
vspace This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
    <marquee>This is basic example of marquee</marquee>
    <marquee direction = "right">The direction of text
       will be from left to right.</marquee>
    <marquee scrolldelay="10">Using Scroll Delay</marquee>
    <marquee scrollamount="2">Using Scroll Amount</marquee>
    <marquee bgcolor="yellow">Using Background Color</marquee>
</body>
</html>

HTML Audio

HTML audio tag is used to define sounds such as music and other audio clips. Currently there are three supported file format for HTML 5 audio tag.
autoplay Specifies that the audio will start playing as soon as it is ready.
controls Specifies that audio controls should be displayed (such as a play/pause button etc).
loop Specifies that the audio will start over again, every time it is finished.
src Specifies the URL of the audio file.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<audio controls autoplay loop>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
</body>
</html>

HTML Video

HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such as a movie clip, song clip on the web page.
autoplay Specifies that the audio will start playing as soon as it is ready.
controls Specifies that audio controls should be displayed (such as a play/pause button etc).
loop Specifies that the audio will start over again, every time it is finished.
src Specifies the URL of the audio file.
height pixels Sets the height of the video player.
widthSets the width of the video player.
poster Specifies an image to be shown while the video is downloading, or until the user hits the play button

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
<video width="300" height="200" controls autoplay loop>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

HTML 5

HTML5 tutorial provides details of all 40+ HTML tags including audio, video, header, footer, data, datalist, article etc.
HTML5 is a next version of HTML. Here, you will get some brand new features which will make HTML much easier. These new introducing features make your website layout clearer to both website designers and users.
There are some elements like <header>, <footer>, <nav> and <article> that define the layout of a website.
It allows you to play a video and audio file.
<article>-This element is used to define an independent piece of content in a document, that may be a blog, a magazine or a newspaper article.
<footer> It defines a footer for a section.
<header> It defines a header for a section.
<main> It defines the main content of a document.
<nav>-It is used to define the navigation link in the document.
<progress>-It specifies the progress of the task.
<section>- It defines a section in the document.
<time>- It is used to define a date/time.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <nav>
  <a href="/html.html">HTML</a> |
   <a href="/css.html">CSS</a> |
   <a href="/js/">JavaScript</a> |
   <a href="/jquery/">jQuery</a>
 </nav>
 <br><br>
   <progress value="35" max="100">
</body>
</html>

HTML Canvas

The HTML <canvas> element is used to draw graphics on a web page.
The graphic below is created with <canvas>.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

What we can do with Canvas?

Canvas can draw colorful text, with or without animation.
Canvas has great features for graphical data presentation with an imagery of graphs and charts.
Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations.
Canvas can respond to JavaScript events.Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement).
Canvas' methods for animations, offer a lot of possibilities for HTML gaming applications.

Creating Canvas

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
</body>
</html>

Drawing Lines

First of all, you must find the <canvas> element.
This is done by using the HTML DOM method getElementById():
var canvas = document.getElementById
("myCanvas");
Secondly, you need a drawing object for the canvas.
The getContext() is a built-in HTML object, with properties and methods for drawing:
var ctx = canvas.getContext("2d");
Finally, you can draw on the canvas.

Canvas Coordinates:
1) The HTML canvas is a two-dimensional grid.
2) The upper-left corner of the canvas has the coordinates (0,0)
Draw a Line:
1) To draw a straight line on a canvas, use the following methods:
moveTo(x,y) - defines the starting point of the line
lineTo(x,y) - defines the ending point of the line
2) To actually draw the line, you must use one of the "ink" methods, like stroke().

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(200,100);
  ctx.stroke();
 </script>
</body>
</html>

Drawing Circles

1) To draw a circle on a canvas, use the following methods:
beginPath() - begins a path
arc(x,y,r,startangle,endangle) - creates an arc/curve.
2) To create a circle with arc() Set start angle to 0 and end angle to 2*Math.PI.
3) The x and y parameters define the x- and y-coordinates of the center of the circle.
4) The r parameter defines the radius of the circle.

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
 </script>
</body>
</html>

Adding Text

1) To draw text on a canvas, the most important property and methods are:
font - defines the font properties for the text
fillText(text,x,y) - draws "filled" text on the canvas
strokeText(text,x,y) - draws text on the canvas (no fill)

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "23px Arial";
  ctx.fillText("Programming Tutorials",10,50);
  ctx.strokeText("In Telugu",170,100);
 </script>
</body>
</html>

Linear Gradient

1) Gradients can be used to fill rectangles, circles, lines, text, etc.
2) Shapes on the canvas are not limited to solid colors.
3) CreateLinearGradient(x,y,x1,y1) - creates a linear gradient
4)Once we have a gradient object, we must add two or more color stops.
5) The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
6) To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var grd = ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"green");
  grd.addColorStop(1,"white");
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
 </script>
</body>
</html>

Radial Gradient

1) Gradients can be used to fill rectangles, circles, lines, text, etc.
2) Shapes on the canvas are not limited to solid colors.
3) CreateRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient 4)Once we have a gradient object, we must add two or more color stops.
5) The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
6) To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).

<!DOCTYPE HTML>
<html>
<head>
 <title>Programming Tutorials In Telugu</title>
</head>

<body>
 <canvas id="myCanvas" width="300" 
  height="200" style="border:1px solid red;">
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
 var grd = ctx.createRadialGradient(75,50,5,90,60,100);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"aqua");
  ctx.fillStyle = grd;
  ctx.fillRect(10,10,150,80);
 </script>
</body>
</html>