In HTML, due to the needs of page beautification and user interaction, the use of hidden elements is very common, such as drop-down menus, content folding, dialog boxes, and upload file boxes.
There are several common manifestations of hiding.
- hidden: Occupies space and cannot be clicked
- style="display: none" : the most common, does not take up space and cannot be clicked
- style="visibility: hidden": takes up space and cannot be clicked
- style="overflow: hidden": Occupies space and cannot be clicked
- style="opacity: 0": Occupies space and cannot be clicked
- style="position: absolute; top: -999em": does not occupy space, cannot be clicked
- style="position: relative; top: -999em; ": Occupies space and cannot be clicked
- style="position: absolute; visibility: hidden; ": Does not occupy space, cannot be clicked
- style="height: 0; overflow: hidden; ": Does not take up space and cannot be clicked
- style="opacity: 0; filter:Alpha(opacity=0); ": Occupies space and can be clicked
- style="position: absolute; opacity: 0; filter:Alpha(opacity=0); ": does not occupy space, you can click
- style="zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0);transform: scale(0);"：IE6/IE7/ IE9 doesn't take up space, IE8/FireFox/Chrome/Opera do. can't click
- style="position: absolute;zoom: 0.001;-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);transform: scale(0);" : Does not occupy space, cannot be clicked
In most cases, hidden elements cannot be directly operated. If you want to manipulate hidden elements, if you cannot trigger their display by using normal page steps, you can execute JavaScript scripts to make the elements visible and operable by removing the hidden or style attributes of the elements.
For example, passing through the picture bed network https://imgchr.com/. As shown in Figure 5.10.
The actual upload box is not the "Start Upload" button. Instead, it is hidden in the upper left corner of the page. We can find the actual upload box by searching for input[type=file] in the Elements panel Ctrl+F. There are two places here, one is to upload pictures, and the other is to upload pictures through the camera. We choose the first upload box. The upload box adds the sytle attribute visibility: hidden attribute to the element through a style class hidden-visibility to achieve the purpose of hiding. Therefore, we only need to remove the style attribute of the element, and then use send_keys to complete the image upload. code show as below.
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get('https://imgchr.com/')
elm = driver.find_element('id', 'anywhere-upload-input')
js = 'arguments[0].removeAttribute("style");'
driver.execute_script(js, elm)
sleep(0.5)
elm.send_keys('/Users/superhin/Downloads/beida.jpeg')
sleep(3)
driver.quit()In the above example, locate the specified input box first, then pass it to the JavaScript script as a parameter and remove its style attribute. Since the execution of the script often takes a certain amount of time, wait for 0.5 seconds before continuing. The upload box supports using the send_keys file path to complete the upload. Readers need to change the picture address to their own local address.
Restricted attributes such as read-only and gray can be removed in a similar way, such as disable
Practical case
Optical theory is useless, you have to learn to follow along, and you have to do it yourself, so that you can apply what you have learned to practice. At this time, you can learn from some practical cases
If it is helpful to you, please like and collect it to give the author an encouragement. It is also convenient for you to quickly find it next time.
If you don’t understand, please consult the small card below. The blogger also hopes to learn and progress with like-minded testers
At the right age, choose the right position, and try to give full play to your own advantages.
My road of automated test development is inseparable from the plan of each stage along the way, because I like planning and summarizing,
Test and develop video tutorials, study notes and receive portals! ! !