Note: This blog is based on selenium 4.1.0
In selenium, if you want to operate on elements, you generally need the following steps:
- View the element attributes in the browser so that selenium can find the element on the page
- Create element objects in code
- Element operation, obtaining element information
View element attributes
Enter developer mode in the browser
Method 1: Right click-Inspect
Method 2: Settings-More Tools-Developer Mode
Method 3: Default shortcut key F12
When this page appears, you enter the browser developer mode and you can view the structure of the web page.
[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-tf6swSQl-1664184420106)(upload://iauRLUk4DgFfFyKYQHzLuy4pyqj.png)]
Find the code of the target element
Method 1: Right-click on the target element-Inspect
Method 2: Use the selector to select the target element
[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-MAFAmNCC-1664184420107)(upload://5naek7Xdni92ioieAsbMwiy9Vzm.png)]
Create element object
Selenium provides a total of eight positioning methods through which element objects can be created. They are:
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">from selenium <span style=\ "color:#cc99cd">import</span> webdriver from selenium<span style="color:#cccccc">.</span>webdriver<span style="color:#cccccc">.</span>common<span style="color:#cccccc ">.</span>by <span style="color:#cc99cd">import</span> By driver <span style="color:#67cdcc">=</span> webdriver<span style="color:#cccccc">.</span><span style="color:#f08d49" >Chrome</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> element_id <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49" >find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color :#f8c555">ID</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'id attribute value'< /span><span style="color:#cccccc">)</span> # id positioning element_name <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49" >find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color :#f8c555">NAME</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'name attribute value'< /span><span style="color:#cccccc">)</span> # name positioning element_class <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49" >find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color :#f8c555">CLASS_NAME</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'class attribute value'< /span><span style="color:#cccccc">)</span> # <span style="color:#cc99cd">class</span> positioning element_tag <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49" >find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color :#f8c555">TAG_NAME</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'html tag name'< /span><span style="color:#cccccc">)</span> # tag positioning element_linktext <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49" >find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color :#f8c555">LINK_TEXT</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'Text information'</ span><span style="color:#cccccc">)</span> # Text positioning: only available for <span style="color:#67cdcc"><</span>a<span style= "color:#67cdcc">></span> tag element_partiallinktext <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49" >find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color :#f8c555">PARTIAL_LINK_TEXT</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'Text information'</ span><span style="color:#cccccc">)</span> # Text blur positioning: only available for <span style="color:#67cdcc"><</span>a<span style ="color:#67cdcc">></span> tag element_css <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49" >find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color :#f8c555">CSS_SELECTOR</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'css expression'< /span><span style="color:#cccccc">)</span> # css positioning element_xpath <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49" >find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color :#f8c555">XPATH</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'xpath expression'< /span><span style="color:#cccccc">)</span> # xpath positioning </code></span></span>
Element operation
Note: element refers to the element object
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element<span style=" color:#cccccc">.</span><span style="color:#f08d49">click</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> # Click element<span style="color:#cccccc">.</span><span style="color:#f08d49">send_keys</span><span style="color:#cccccc"> (</span><span style="color:#7ec699">"helloworld"</span><span style="color:#cccccc">)</span> # Input element<span style="color:#cccccc">.</span><span style="color:#f08d49">clear</span><span style="color:#cccccc"> (</span><span style="color:#cccccc">)</span> # Clear element<span style="color:#cccccc">.</span><span style="color:#f08d49">submit</span><span style="color:#cccccc"> (</span><span style="color:#cccccc">)</span> # Submit form </code></span></span>
Find element child nodes
With the current element as the parent node, find the child nodes in this element. Child nodes also support selenium’s eight positioning methods.
Taking Baidu’s “Baidu Click” as an example, we can first find its parent node and then find “Baidu Click”:
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element <span style=" color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span>< span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">CSS_SELECTOR </span><span style="color:#cccccc">,</span> <span style="color:#7ec699">".s_btn_wr"</span><span style=\ "color:#cccccc">)</span><span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span>< span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">TAG_NAME </span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'input'</span><span style=" color:#cccccc">)</span> </code></span></span>
Get attributes
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element<span style=" color:#cccccc">.</span>tag_name # Get the tag name
element<span style="color:#cccccc">.</span>text # Get text
element<span style="color:#cccccc">.</span><span style="color:#f08d49">get_attribute</span><span style="color:#cccccc"> (</span><span style="color:#7ec699">'class'</span><span style="color:#cccccc">)</span> # Get attributes
element<span style="color:#cccccc">.</span>id # Get selenium internal element number
element<span style="color:#cccccc">.</span>size # Get the size, return value: <span style="color:#cccccc">{</span><span style=\ "color:#7ec699">"height"</span><span style="color:#67cdcc">:</span> xx<span style="color:#cccccc">, </span><span style="color:#7ec699">"width"</span><span style="color:#67cdcc">:</span> xx<span style=\ "color:#cccccc">}</span>
element<span style="color:#cccccc">.</span>location # Get coordinates, return value: <span style="color:#cccccc">{</span><span style=\ "color:#7ec699">"x"</span><span style="color:#67cdcc">:</span> xx<span style="color:#cccccc">) </span><span style="color:#cccccc">,</span><span style="color:#7ec699">"y"</span><span style=" color:#67cdcc">:</span> xx<span style="color:#cccccc">}</span>
</code></span></span>
Element status
Return value: Boolean value
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element<span style=" color:#cccccc">.</span><span style="color:#f08d49">is_selected</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span> # Whether the element is selected element<span style="color:#cccccc">.</span><span style="color:#f08d49">is_enabled</span><span style="color:#cccccc"> (</span><span style="color:#cccccc">)</span> # Whether the element is operable element<span style="color:#cccccc">.</span><span style="color:#f08d49">is_displayed</span><span style="color:#cccccc"> (</span><span style="color:#cccccc">)</span> # Whether the element is visible </code></span></span>
Note: Whether an element is visible refers to whether the element appears in the web page, regardless of whether the element is in the browser’s visual window or not.
Screenshot
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element<span style=" color:#cccccc">.</span><span style="color:#f08d49">screenshot</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'study_selenium/resource/element_shot.png'</span><span style="color:#cccccc">)</span> # Take a screenshot and save it to a file middle photo <span style="color:#67cdcc">=</span> element<span style="color:#cccccc">.</span>screenshot_as_png # Screenshot, binary saved in photo variable</code></span></span>
Finally, I would like to thank everyone who read my article carefully. Reciprocity is always necessary. Although it is not a very valuable thing, if you can use it, you can just take it away:
This information should be the most comprehensive and complete preparation warehouse for [software testing] friends. This warehouse has also accompanied tens of thousands of test engineers through the most difficult journey. I hope it can also help you!
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Python entry skill treeWeb crawlerSelenium388026 people are learning the system