Selenium+JQuery positioning method and application

Selenium + JQuery positioning method and application

1 JQuery positioning instructions
- 1.1 JQuery positioning method
- 1.2 The three most commonly used operations in JQuery
- 1.3 JQuery an example
- - 1.3.1 Username input box
  - 1.3.2 Password input box
  - 1.3.3 Login button
  - 1.3.4 Complete code
2 JQuery selectors
- 2.1 List of commonly used selectors
- 2.2 Thinking

1. Selenium provides many element positioning methods, so I won’t go into details here. This article mainly studies and understands the positioning of JQuery;
2. Then why do we need to use JQuery for positioning? Because some pages cannot be solved using the Selenium method, you can try to use JQuery positioning.

1 JQuery positioning description

1.1 JQuery positioning method

There are two positioning methods for JQuery:

# 1. Use JQuery selector to complete element operation (get the corresponding element directly);
# 2. Use JQuery traversal to select elements (for obtaining page elements with more complex levels).

JQuery syntax:

$(selector).action()

JQuery is defined through the $ symbol. selector is mainly used to obtain basic HTML elements. action() Used to implement basic operations on obtaining elements.

1.2 The three most commonly used operations of JQuery

$(selector).val("input_value"): input_value is the input text information;
$(selector).val(""): Clear the input content;
$(selector).click(): Click operation.

1.3 An example of JQuery

The test object is the login interface of ZenTao:

1.3.1 User name input box

Page source code:

<input class="form-control" type="text" name="account" id="account" autocomplete="off" autofocus="">

Enter $("input") in the console and you can see 3 contents. When the mouse is placed on the first one, we find that it is the input box for the user name, as follows:
Then the selector indicating the user name is: $("input:first")

1.3.2 Password input box

Page source code:

<input class="form-control" type="password" name="password" autocomplete="off">

In the same way, the password selector is: $(":password");

1.3.3 Login button

Page source code:

<button type="submit" id="submit" class="btn btn-primary" data-loading="Wait...">Log in</button>

When the selector is: $(":button"), two buttons are displayed, the second of which is the login button:
Then the selector of the login button is: $(":button")[1]:

1.3.4 complete code

# -*- coding:utf-8 -*-
# Author: Chong Wuya
# Date: 2023/11/13
# File name: test_zentao.py
# Function: JQuery positioning
# Contact: VX(NoamaNelson)
# Blog: https://blog.csdn.net/NoamaNelson

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("http://localhost/zentao/user-login.html")
driver.implicitly_wait(10)

user_name = "$('input:first').val('admin')"
driver.execute_script(user_name)
time.sleep(0.5)

pass_wd = "$(':password').val('ZenTao123456')"
driver.execute_script(pass_wd)
time.sleep(1)

login_but = "$(':button')[1].click()"
driver.execute_script(login_but)
time.sleep(2)

driver.quit()

2 JQuery selector

2.1 List of commonly used selectors

elements elements

Selector	Example	Description
`*`	`$("*")`	All elements
`#id`	`$("#name")`	`id=" element of name`“
`.class`	`$(".xxxx" )`	All elements of `class="xxxx"`
`element`	`$("p")`	All Element
`.class.class`	`$(".name.zhang" )`	All elements with `class="name"` and `class="zhang"`
`:first`	$(“p:first”)	First Element
`:last`	`$("p:last")`	Last Element
`:even`	`$("tr:even")`	All even
`:odd`	`$("tr:odd")`	All odd
`:eq(index)`	`$("ul li:eq(2)")`	The third element in the list (`index` starts from 0)
`:gt(no)`	`$("ul li:gt(2)")`	List elements with `index` greater than 2
`:lt(no)`	`$("ul li:lt(2)")`	List elements with `index` less than 2
`:not(selector)`	`$("input:not(:empty)")`	All `input` elements that are not empty
`:header`	`$(":header")`	All headers Elements
`:animated`		All animated elements
`:contains(text)`	`$(":contains('xxxx')")`	Contains all elements of the specified string `xxxx`
`:empty`	`$(":empty")`	All elements without child (element) nodes
`:hidden`	`$("p:hidden")`	All hidden Element
`:visible`	`$("table:visible")` code>	All visible tables
`s1,s2,s3`	`$ ("th,td,.intro")`	All elements with matching selections
`[attribute]`	`$("[href]")`	All elements with the `href` attribute
`[attribute=value]`	`$("[href='#']" )`	All elements whose `href` attribute has a value equal to `"#"`
`[attribute!=value]`	`$("[href!='#']")`	All elements whose `href` attribute value is not equal to `"#"`
`: input`	`$(":input")`	All elements
`:text`	`$(":text")`	All elements with `type="text"`
`:password`	`$(":password")`	All `type="password" input>` element
`:radio`	`$(":radio")`	All elements of t`ype="radio"`
`:checkbox`	`$(":checkbox")`	All`type="checkbox "`‘s element
`:submit`	`$(":submit")`	All elements of `type="submit"` td>
`:reset`	`$(":reset")`	All elements with `type="reset"`
`:button`	`$(":button")`	All `type="button"` element
`:image`	`$(":image")`	All elements of `type="image"`
`:file`	`$(":file")`	All`type="file "`‘s element
`:enabled`	`$(":enabled")`	All activated `input` elements
`:disabled`	`$(":disabled")`	All disabled `input` elements td>
`:selected`	`$(":selected")`	All selected `input` elements
`:checked`	`$(\ ":checked")`	All selected `input` elements

2.2 Thinking

Following the previous example, after logging in to the ZenTao system, click [Project] on the left: $(a[data-app='project']).click():
Click [Create Project] in the upper right corner: $([href='/zentao/project-createGuide-0.html']:first):
Click [Waterfall] mode:
It seems that I cannot enter the interface to create a project:
The code here is omitted, you can try it yourself.