A method for automatically identifying sliding verification codes based on controlling web page element attributes

Abstract

The present invention discloses a method for realizing automatic recognition of sliding verification codes based on controlling the attributes of web page elements, comprising the following steps: S1 hiding slider image 2 and intercepting background image 1; S2 modifying the color attribute of the background image 1 element and intercepting slider image 2; S3 full-image cyclic scanning and comparison of the color difference between image 1 and image 2 to determine whether it is equal to the preset color difference; S4 outputting the horizontal displacement distance value distance and dragging the slider to combine. The present invention solves the problems of inaccurate recognition, complex recognition process and low recognition efficiency of the existing sliding verification code recognition technology in complex situations, thereby achieving the purpose of realizing automatic recognition of slider verification codes, simplifying the recognition method, improving recognition accuracy and efficiency, and improving the efficiency of automated test login.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method for realizing automatic recognition of sliding verification codes based on controlling attributes of web page elements. Background Art

[0002] Compared with graphic verification codes, sliding verification codes are more difficult to identify. Sliding verification codes require dragging the slider to complete verification. The main verification method is to drag the slider to crack the image. If the image is completely combined, the verification is successful, that is, the form is successfully submitted, otherwise it needs to be re-verified.

[0003] The existing sliding verification code recognition methods usually: first, use deep learning models for recognition, which has high recognition calculation and complex technical implementation; second, the original image is binarized and compared with the color difference for recognition. When this method is used for complex image colors and recognition of different images, the color difference of different images is often not fixed or has deviations within a certain range, resulting in the inability to accurately identify the stitching position of the slider image, low recognition rate, and low efficiency. Therefore, the use of existing image recognition technology will lead to login failures during the automated login process, which cannot meet the requirements of efficient recognition. Based on the above reasons, it is necessary to control the page element attributes to realize the automatic recognition of sliding verification codes and improve the efficiency of automated test login. Summary of the invention

[0004] In view of the above technical problems in the related art, the present invention proposes a method for realizing automatic recognition of sliding verification codes based on controlling the attributes of web page elements, which can overcome the above shortcomings of the prior art.

[0005] To achieve the above technical objectives, the technical solution of the present invention is implemented as follows:

[0006] A method for automatically identifying a sliding verification code based on controlling web page element attributes comprises the following steps:

[0007] S1 hides the second slider image and captures the first background image: After starting the browser driver based on selenium to access the login webpage, locate the position of the overall image element of the sliding verification code, use JavaScript script, JavaScript can change the HTML style, use document.getElementById method to locate the second slider image element, hide the HTML element by changing the display style, hide the second slider image, and capture the first background image;

[0008] S2 modifies the color attribute of the background image 1 element and captures the slider image 2: Use JavaScript script and document.getElementById method to locate the background image 1 element, modify the color of the background image 1 element by changing the background style, and capture the slider image 2;

[0009] S3 full-image cyclic scanning compares the color difference between image 1 and image 2 to determine whether it is equal to the preset color difference, specifically including the following steps:

[0010] S31 sets the preset color difference between the first and second images: respectively check the RGB color values ​​of the stitching position of the first and second images, subtract and summarize them to obtain the RGB color difference value 1, which is usually fixed. Before designing the automation method, check and set the RGB color difference value 1 as the preset color difference value in the code. The preset color difference value is used as the condition value for looping to determine whether the output lateral displacement distance value distance is met;

[0011] S32 full-image loop scanning compares the color difference between image 1 and image 2, determines whether it is equal to the preset color difference, and obtains the horizontal displacement distance value distance: adopts the full-image loop scanning method, converts the numbers in the same coordinate points in image 1 and image 2 into RGB numbers respectively, and then subtracts the three numbers to obtain the RGB color difference value 2 of the same coordinate point, starts the loop from the 0 position of the X-axis and Y-axis of the image, and determines that when the RGB color difference value 2 is equal to the preset color difference, terminates the loop, and the X-axis coordinate obtained at this time is the required horizontal displacement distance value distance;

[0012] S4 outputs the horizontal distance value distance and drags the slider to splice: the method provided by Selenium to simulate mouse movement, dragging, and long-pressing page elements is used to move the slider. After pressing the slider element using the long-press operation clickAndHold, the move operation moveByOffset is used to pass in the horizontal distance value distance obtained before. The slider can be dragged to the verification code splicing position to finally achieve the recognition effect.

[0013] Furthermore, the method for hiding the second slider image in S1 is: adding display=none to the style attribute of the second slider image element.

[0014] Furthermore, the method for modifying the color of the background image element in S2 is: adding background=#000000 to the style attribute of the background image element style to modify the background Figure 1 The element color attribute is black.

[0015] Furthermore, the method for viewing the RGB color value of the stitching position when the first and second pictures are stitched together in S31 is: viewing through a third-party picture viewing tool.

[0016] Furthermore, if the color of an element of the modified background image in S31 is pure black, the preset color difference is 624.

[0017] Beneficial effects of the invention: The method of the invention solves the problems of inaccurate recognition, complex recognition process and low recognition efficiency of existing sliding verification code recognition technology in complex situations, thereby achieving the purpose of automatic recognition of sliding verification codes, simplifying recognition methods, improving recognition accuracy and efficiency, and improving automated test login efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0019] Figure 1 It is a flowchart of a method for realizing automatic recognition of sliding verification codes based on controlling attributes of web page elements according to an embodiment of the present invention. DETAILED DESCRIPTION

[0020] The following will be combined with the accompanying drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field belong to the scope of protection of the present invention.

[0021] like Figure 1 As shown, the method for realizing automatic recognition of sliding verification codes based on controlling web page element attributes according to an embodiment of the present invention includes the following steps:

[0022] S1 hides the second slider image and captures the first background image: After starting the browser driver based on selenium to access the login webpage, locate the position of the overall image element of the sliding verification code, use JavaScript script, JavaScript can change the HTML style, use document.getElementById method to locate the second slider image element, hide the HTML element by changing the display style, hide the second slider image, and capture the first background image;

[0023] S2 modifies the color attribute of the background image 1 element and captures the slider image 2: Use JavaScript script and document.getElementById method to locate the background image 1 element, modify the color of the background image 1 element by changing the background style, and capture the slider image 2;

[0024] S3 full-image cyclic scanning compares the color difference between image 1 and image 2 to determine whether it is equal to the preset color difference, specifically including the following steps:

[0025] S31 sets the preset color difference between the first and second images: respectively check the RGB color values ​​of the stitching position of the first and second images, subtract and summarize them to obtain the RGB color difference value 1, which is usually fixed. Before designing the automation method, check and set the RGB color difference value 1 as the preset color difference value in the code. The preset color difference value is used as the condition value for looping to determine whether the output lateral displacement distance value distance is met;

[0026] S32 full-image loop scanning compares the color difference between image 1 and image 2, determines whether it is equal to the preset color difference, and obtains the horizontal displacement distance value distance: adopts the full-image loop scanning method, converts the numbers in the same coordinate points in image 1 and image 2 into RGB numbers respectively, and then subtracts the three numbers to obtain the RGB color difference value 2 of the same coordinate point, starts the loop from the 0 position of the X-axis and Y-axis of the image, and determines that when the RGB color difference value 2 is equal to the preset color difference, terminates the loop, and the X-axis coordinate obtained at this time is the required horizontal displacement distance value distance;

[0027] S4 outputs the horizontal distance value distance and drags the slider to splice: the method provided by Selenium to simulate mouse movement, dragging, and long-pressing page elements is used to move the slider. After pressing the slider element using the long-press operation clickAndHold, the move operation moveByOffset is used to pass in the horizontal distance value distance obtained before. The slider can be dragged to the verification code splicing position to finally achieve the recognition effect.

[0028] The method for hiding the slider image 2 in S1 described above is: add display=none to the style attribute of the slider image 2 element.

[0029] The method for modifying the color of the background image element in S2 mentioned above is: add background=#000000 in the style attribute of the background image element style to modify the background Figure 1 The element color attribute is black.

[0030] The method for viewing the RGB color value of the stitching position when the first and second images are stitched together in S31 is: viewing through a third-party image viewing tool.

[0031] In the above S31, if the color of an element of the modified background image is pure black, the preset color difference is 624.

[0032] In order to facilitate understanding of the above technical solutions of the present invention, the above technical solutions of the present invention are described in detail below through specific usage methods.

[0033] In specific use, first hide the slider image 2, capture the background image 1, then modify the color attributes of the background image 1 element, capture the slider image 2, and then scan the entire image in a loop to compare the color difference between image 1 and image 2 to determine whether it is equal to the preset color difference. If the color difference between image 1 and image 2 is equal to the preset color difference, output the horizontal distance value distance, drag the slider to merge, and successfully identify.

[0034] To sum up, with the help of the above-mentioned technical scheme of the present invention, the problems of inaccurate recognition, complex recognition process and low recognition efficiency of the existing sliding verification code recognition technology in complex situations are solved, thereby achieving the purpose of automatic recognition of sliding verification codes, simplifying recognition methods, improving recognition accuracy and efficiency, and improving automated test login efficiency.

[0035] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for automatically identifying a sliding verification code based on controlling the attributes of web page elements, characterized in that: The following steps are involved: S1 hides the second slider image and captures the first background image: After starting the browser driver based on selenium to access the login webpage, locate the position of the sliding verification code overall image element, use JavaScript script, JavaScript can change the HTML style, use document.getElementById method to locate the second slider image element, hide the HTML element by changing the display style, hide the second slider image, and capture the first background image; S2 modifies the color attribute of the background image 1 element and captures the slider image 2: Use JavaScript script and document.getElementById method to locate the background image 1 element, modify the color of the background image 1 element by changing the background style, and capture the slider image 2; S3 full-image cyclic scanning compares the color difference between image 1 and image 2 to determine whether it is equal to the preset color difference, specifically including the following steps: S31 sets the preset color difference between the first and second images: respectively check the RGB color values ​​of the stitching position of the first and second images when stitching, subtract and summarize them to obtain the RGB color difference value 1, check before designing the automation method, and set the RGB color difference value 1 as the preset color difference value in the code, and the preset color difference value is used as the condition value for looping to judge whether it meets the output lateral displacement distance value distance; S32 full-image loop scanning compares the color difference between image 1 and image 2, determines whether it is equal to the preset color difference, and obtains the horizontal displacement distance value distance: adopts the full-image loop scanning method, converts the numbers in the same coordinate points in image 1 and image 2 into RGB numbers respectively, and then subtracts the three numbers to obtain the RGB color difference value 2 of the same coordinate point, starts the loop from the 0 position of the X-axis and Y-axis of the image, and determines that when the RGB color difference value 2 is equal to the preset color difference, terminates the loop, and the X-axis coordinate obtained at this time is the required horizontal displacement distance value distance; S4 outputs the horizontal distance value distance and drags the slider to splice: the method provided by Selenium to simulate mouse movement, dragging, and long-pressing page elements is used to move the slider. After pressing the slider element using the long-press operation clickAndHold, the move operation moveByOffset is used to pass in the horizontal distance value distance obtained before. The slider can be dragged to the verification code splicing position to finally achieve the recognition effect.

2. The method according to claim 1, characterized in that The method for hiding the second slider image in S1 is: adding display=none to the style attribute of the second slider image element.

3. The method according to claim 1, characterized in that The method for modifying the color of the background image-element in S2 is: adding background=#000000 in the style attribute of the background image-element style, and modifying the color attribute of the background image-element to black.

4. The method according to claim 1, characterized in that: The method for viewing the RGB color value of the stitching position when the first and second pictures are stitched together in S31 is: viewing through a third-party picture viewing tool.

5. The method according to claim 1, characterized in that In the above S31 , if the color of an element of the modified background image is pure black, the preset color difference is 624.

Images