精华内容
下载资源
问答
  • 图片定位代码

    2013-07-15 10:01:53
    图片定位代码 web开发 图片定位链接 html 代码 asp 代码
  • 因为接手上个人的项目,在项目添加新功能时,使用cdn方式引入使用地图功能,使用功能只用到了地图的定位、点标记、详细地址查询、poi搜索和输入提示、计算两点之间的距离;写这个文档也只是记录一下,因为我在寻找...

    因为接手上个人的项目,在项目添加新功能时,使用cdn方式引入使用地图功能,使用功能只用到了地图的定位、点标记、详细地址查询、poi搜索和输入提示、计算两点之间的距离;写这个文档也只是记录一下,因为我在寻找高德地图问题时发现h5 和 web 端的好少,因此记录一下方便以后查找。

    h5的navigator 原生定位

    // 在导入js的时候添加插件AMap.Geocoder
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的WEBjs的key&plugin=AMap.Geocoder"></script>
    let geocoder = new AMap.Geocoder({}); // 获取地理编码与逆地理编码类 实例
    // 判断是否存在navigator.geolocation
    if(navigator && navigator.geolocation) {
    	// 开始定位
        navigator.geolocation.getCurrentPosition(function(position) {
            let latitude = position.coords.latitude;// 获取纬度
            let longitude = position.coords.longitude;// 获取经度
            // 获取到的是gps 定位 使用高德的经纬度转换
            // https://lbs.amap.com/api/webservice/guide/api/convert 这是经纬度转换的地址可以看下有什么参数
            $.ajax({
                url: 'https://restapi.amap.com/v3/assistant/coordinate/convert?key=必须是web服务的key',
                type: 'get',
                data: {
                    locations: longitude+','+latitude,
                    coordsys: "gps",
                },
                success:function(res){
                	// 根据转换的经纬度 查询当前位置的详细地址
                    geocoder.getAddress(res.locations.split(','),function(status, result) { 
                    	// 查询详细地址
                        alert(result.regeocode.formattedAddress)
                    });
                }
            })
        },function(err){
            console.log(err);
        },{
            enableHighAcuracy: true, //位置是否精确获取
            timeout: 5000,            //获取位置允许的最长时间
            maximumAge: 1000          //多久更新获取一次位置
        });
    }
    

    1. 高德地图

    1. 首先我们引入脚本

    当前时间 2020/09/22 高德地图版本号 v=1.4.15
    使用高德地图 v=2.0 版本在ios上有兼容问题地图渲染不出来 显示白屏效果 (不推荐使用)
    高德地图对 http 站点的定位服务不精确 ,微信自从升级到7.0后就对http 站点的定位不支持了所以高德在微信上定位失效可能是http 站点导致的问题( 但是在ie 浏览器和edge浏览器是可以使用的 )
    如何申请高德地图key

    <!--引入高德地图JSAPI -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=you key & plugin=AMap.Geocoder"></script>
    
    1. 在$(document).ready(function(){ }) 中执行map 的init 方法
    	let mapObj; // 地图实例
    	let geolocation; // 定位对象实例
    	let geocoder = new AMap.Geocoder({}); // 获取地理编码与逆地理编码类 实例
    	
    	mapObj = new AMap.Map('container',{
            center: [ 121.47, 31.23], // 地图中心点坐标值
            resizeEnable: true, // 是否监控地图容器尺寸变化,默认值为false
            zoom: 9, // 地图显示的缩放级别
        });
        // 定位
        mapObj.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位,默认:true
                timeout: 10000,          //超过10秒后停止定位,默认:无穷大
                maximumAge: 0,           //定位结果缓存0毫秒,默认:0
                convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
                showButton: true,        //显示定位按钮,默认:true
                buttonPosition: 'RB',    //定位按钮停靠位置,默认:'LB',左下角
                // buttonOffset: new AMap.Pixel(80, 90),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记,默认:true
                showCircle: false,        //定位成功后用圆圈表示定位精度范围,默认:true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true
                zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
            });
            mapObj.addControl(geolocation); // 添加定位控件
            // 重新定位 只需要执行下面的方法就行
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)
        })
    	
    	// 定位成功
    	function onComplete (data) {
    	    // data是具体的定位信息
    	    let position = [data.position.lng, data.position.lat]
    	    mapObj.setZoomAndCenter(15, position) // 将当前定位设置为中心并缩放至对应层级
    	    compareDistance(data.position); // 查询距离
    	}
    	// 定位失败
    	function onError (data) {
    	    // 定位出错
    	}
    	
    	// 计算两个坐标点距离
    	let compareDistance = function(position1, position2) {
    	    //转换
    	    var myDistance = position1.distance([121.492728, 31.150647]);//这里测量距离
    	    // console.log(myDistance,'米')
    	}
    
    	// 获取城市
        getCityGD(function(res) {
            // poi搜索 和 输入提示
            poiSearchAndInputTip(res.city);
        })
    
    	// 获取当前城市
    	function getCityGD(callback) {
    	    AMap.plugin('AMap.CitySearch', function () {
    	        var citySearch = new AMap.CitySearch()
    	        citySearch.getLocalCity(function (status, result) {
    	          if (status === 'complete' && result.info === 'OK') {
    	            // 查询成功,result即为当前所在城市信息
    	            callback(result)
    	          }else{
    				callback('')
    			  }
    	        })
    	      })
    	}  
    	
    	// poiSearchAndInputTip  // poi搜索 和 输入提示
    	function poiSearchAndInputTip(city) {
    	    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
    	        var autoOptions = {
    	            input: "tipinput",
    	            // 城市,默认全国
    	            city: city || "全国",
    	        }
    	        var autocomplete= new AMap.Autocomplete(autoOptions)
    	
    	        var placeSearch = new AMap.PlaceSearch({
    	            city: city || '全国',
    	            map: mapObj,
    	            pageSize: 1
    	        })
    	        AMap.event.addListener(autocomplete, 'select', function(e){
    	            //TODO 针对选中的poi实现自己的功能
    	            let location = e.poi.location; // 当前点的经纬度 
    	            // e.poi // 当前点的详细信息
    	            placeSearch.setCity(e.poi.adcode);
    	            placeSearch.search(e.poi.name);  //关键字查询查询
    	            // 根据经纬度查询 详细地址 具体到街道
    	            geocoder.getAddress(location,function(status, result){ // 查询详细地址
    	                if (status === 'complete'&& result.regeocode) {
    	                    document.getElementById('address').innerHTML = result.regeocode.formattedAddress;
    	                }else{
    	                    console.error('根据经纬度查询地址失败')
    	                }
    	            })
    	        })
    	    })
    	}
    
    1. 创建marker
    	// 创建点标记 position 格式 {lat:121.492728 , lng:31.150647}
    	let createMarker = function(position) { //
    	    // 创建点标记
    	    var marker = new AMap.Marker({
    	    	// 转换经纬度 new AMap.LngLat
    	        position: new AMap.LngLat(position.lat, position.lng),   // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
    	        offset: new AMap.Pixel(-10, -10),
    	        // 添加icon图标是因为有时候在手机端图片显示不出来
    	        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 添加 Icon 图标 URL
    	    });
    	    mapObj.add(marker)
    	}
    
    1. 创建圆
    	// position 格式 {lat:121.492728 , lng:31.150647}
    	let createCircle = function (position) {
    	    // 创建圆 
    	    var circle = new AMap.Circle({
    	        center: new AMap.LngLat(121.492728,31.150647), // 圆心位置
    	        radius: 500,  //半径
    	        strokeColor: "#216BFF",  //线颜色
    	        strokeOpacity: 1,  //线透明度
    	        strokeWeight: 1,  //线粗细度
    	        fillColor: "#1F6AFF",  //填充颜色
    	        fillOpacity: 0.1 //填充透明度
    	    });
    	    // 添加圆
    	    mapObj.add(circle);
    	}
    
    1. 去除高德logo和定位按钮样式
    /* 隐藏高德logo */
    .amap-logo,.amap-copyright { display:none !important; }
    /* 定位按钮位置调整 */
    .amap-geolocation-con .amap-geo { bottom:200px!important; display: none!important;}
    

    创建圆和点标记是通过目标点的圆圈范围来判断、当前位置是否处于目标的范围内 , 高德地图在浏览器上是获取不到当前定位的 需要通过手机打开gps定位 并在https 站点上才能获取, 如果是做 h5+app 的话可以在app 上显示定位的。


    2. 腾讯地图

    1. 腾讯地图导入脚本

    腾讯地图导入geolocation脚本是因为 腾讯地图的定位服务是一个单独的脚本服务

    <!--  腾讯地图 -->
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=you key"></script>
    <!--  如果有需要腾讯地图定位服务可以使用 -->
    <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    
    1. 同高德地图在dom渲染完成后执行
    	let key = 'you key';// 腾讯key
    	let mapObj; // 地图实例
    	
    	// 创建地图
    	mapObj = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(31.23, 121.47),      // 地图的中心地理坐标。
            zoomControl: false,                      //设置缩放控件启用
            zoomControlOptions: {                   //设置缩放控件的样式状态
                style: qq.maps.ZoomControlStyle.SMALL
            },
            disableDefaultUI: true,        // 禁止所有控件                     
            draggable: true,               //设置是否可以拖拽
            scrollwheel: true,             //设置是否可以滚动
            disableDoubleClickZoom: false,    //设置是否禁止可以双击放大
            zoom: 15                       	// 地图的当前缩放等级。
        });
    
    1. 腾讯地图定位

    因为我使用 腾讯定位需要请求9秒 而且在手机上有时还会请求失败(速度慢请求还会失败) 所以我使用的是高德地图的定位
    服务、 为此我查找了腾讯和高德坐标系 都是使用的GCJ-02坐标系
    实在不行腾讯还有坐标转换接口=>> 坐标转换接口、快捷键

    • WGS84 :地理坐标系统,Google Earth中国外的Google Map使用,另外,目前基本上所有定位空间位置的设备都使用这种坐标系统,例如手机的GPS系统
    • GCJ-02:投影坐标系统,也就是我们平常所说的火星坐标系,Google Map中国高德腾讯好像使用,这个是中国自己在WGS84基础上加密而成,目的显而易见。
    • BD09:投影坐标系统,百度地图使用,在GCJ-02基础上二次加密而成。
    • 坐标系科普–引用地址、有兴趣可以自己去看看

    如何申请腾讯地图key

    	var key = "you key";
    	// Geolocation 参数 第一个是腾讯地图的key  第二个是调用来源,一般为您的应用名称
        var geolocation = new qq.maps.Geolocation(key, "myapp");
        // 请求定位时间
        var options = {timeout: 9000};
        // 执行获取定位
        geolocation.getLocation(showPosition, showErr, options);
    	// 定位成功
        function showPosition(position) {
        	// 成功...
        }
        function showErr() {
        	// 失败... 
        }
    
    1. 使用的高德地图定位 – 因为腾讯定位没有给我们定位图片所以要自己创建一个marker代表当前定位
    	// 定位 -- 高德
        AMap.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位,默认:true
                timeout: 10000,          //超过10秒后停止定位,默认:无穷大
                maximumAge: 0,           //定位结果缓存0毫秒,默认:0
                convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
                showButton: true,        //显示定位按钮,默认:true
                buttonPosition: 'RB',    //定位按钮停靠位置,默认:'LB',左下角
                // buttonOffset: new AMap.Pixel(80, 90),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记,默认:true
                showCircle: false,        //定位成功后用圆圈表示定位精度范围,默认:true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true
                zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
            });
            // 重新定位 只需要执行下面的方法就行
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)
        })
        // 定位成功
    	function onComplete (data) {
    	    // 将高德坐标转换成腾讯的坐标 new qq.maps.LatLng 
    		let arr = data.position.toString().split(',');
    		// 设置中心点
    	    mapObj.panTo(new qq.maps.LatLng(arr[1],arr[0]));//坐标 当前位置
    	    mapObj.zoomTo(17) // 设置层级
    	    // 创建当前位置marker
    		createMarker(new qq.maps.LatLng(arr[1],arr[0]))
    	}
    	// 定位失败
    	function onError (data) {
    	    // 定位出错...
    	}
    	
    	// 创建marker 当前位置 marker  因为腾讯定位没有给我们定位图片所以要自己创建一个marker
    	function createMarker (center, iconImg) {
    		iconImg  = iconImg || 'http://lbs.qq.com/javascript_v2/img/center.gif'
    		let anchor = new qq.maps.Point(0, 39),
    		size = new qq.maps.Size(42, 68),
    		origin = new qq.maps.Point(0, 0),
    		icon = new qq.maps.MarkerImage(
    		    iconImg,
    		    size,
    		    origin,
    		    anchor
    		);
    		// 创建maker 
    		var marker = new qq.maps.Marker({
    		    position: center,
    		    map: mapObj,
    		    icon: icon
    		})
    	}
    
    1. 腾讯poi 选点 和 地点搜索 — 腾讯 Autocomplete 自动补全

      利用js 防抖函数处理 oninput 事件防止请求多次执行

      这是Autocomplete 参数地址
      在这里插入图片描述

    	//监听输入拼音,当用户在输入拼音时不进行操作
    	let timer = null, nowCity;
    	// 地图文本框监听 --- 控制 placeholder 显示隐藏
    	function mapInput(e, dom){
    		// 判断当前文本框去除空格后是否有值 
    	    if(!$(dom)[0].value.trim().length) {
    	        $('.placeholder-class').show(); // 自定义文本框placeholder
    	     }else {
    	        $('.placeholder-class').hide(); // 自定义文本框placeholder
    	        clearTimeout(timer)
    	        timer = null;
    			// 防抖处理
    	        timer = setTimeout(()=> {
    	        	// 限制自动补全的查询范围 nowCity
    	            txAutocomplete($(dom)[0].value.trim(), nowCity)
    	        },500)
    	    }
    	}
    	// 获取当前的地理位置非精确定位 城市 在init中执行
    	function getCity() {  
    		$.ajax({
    	        type:'get',
    	        async: false,
    			url:'https://apis.map.qq.com/ws/location/v1/ip',
    			data:{
    	            key: key,
    	            output: 'jsonp'
    	        },
    	        dataType: "jsonp",
    	        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
    	        success:function (response){
    	            nowCity = response.result.ad_info.city
    			}
    		})
    	} 
    
    
    	
    	function txAutocomplete(value, city) {
    		$.ajax({
    	        type:'get',
    	        async: false,
    			url:'https://apis.map.qq.com/ws/place/v1/suggestion',
    			data:{
    				keyword: value, // input 输入框的内容
    				region: city, // 查询内容的城市 当前城市没有查找到默认全国搜索
    	            key: key, // 腾讯地图key
    	            region_fix: 0, 
    	            output: 'jsonp'
    	        },
    	        dataType: "jsonp",
    	        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
    			success:function (response){
    	            if(response.status == 0) {
    	            	// 判断是否有数据 
    	               if(response.data.length == 0) {
    	                    $('#poiTip').hide(); // 这是搜索结果展示容器 如上图 id 隐藏
    	               }else { 
    	                    $('#poiTip').show(); // 这是搜索结果展示容器 如上图 id 显示
    	               }
    	               // autocompleteHtml 生成html 样式 可以自己定义
    	               htmlVal = autocompleteHtml(response.data)
    	               $('#poiTip').html(htmlVal) // 将html 放到容器展示 
    	            }
    			}
    		})
    	}
    	let selectMarker, selectAddressName ;
    	// 选中的地址
    	function selectAddress(lat, lng, evt) {
    	    // 选择完地址后 隐藏 Autocomplete 提示
    	    $('#poiTip').hide();
    	
    	    if(selectMarker) selectMarker.setMap(null);// 移除点标记
    	    let center = new qq.maps.LatLng(lat, lng) // 拿到经纬度转换
    	
    	    // 查询详细地址 具体到街道
    	    getDetailsTX([lat, lng], function(res){
    	    	selectAddressName = res;
    	        $('#address').html(selectAddressName)
    	    }); // 腾讯
    	
    	    // 添加marker 
    	    selectMarker = new qq.maps.Marker({
    	        position: center,
    	        draggable: false,// 是否可以拖动
    	        map: mapObj
    	    });
    	
    	    // 将地图中心移到对应坐标
    	    mapObj.panTo(center); 
    	    // 将缩放至17 最大18 最小3
    	    mapObj.zoomTo(17)
    	
    	
    	    // 点击marker 添加信息窗体 初始化infoWindow
    	    var infoWindow = new qq.maps.InfoWindow({
    	        map: mapObj,
    	        position: new qq.maps.LatLng(39.984104, 116.307503),
    	        offset: { x: -8, y: -32 }
    	    });
    	    infoWindow.close();// 先隐藏
    	
    	
    	    // 监听地图marker 点击事件
    	    qq.maps.event.addListener(selectMarker, 'click', function() {
    	            infoWindow.open();
    	            infoWindow.setPosition(selectMarker.getPosition());
    	            // 信息窗体展示详细地址
    	            infoWindow.setContent(`${selectAddressName }`)
    	    });
    	}
    	// 获取详情地址 --- 逆地址解析 -- 腾讯  三林地铁站 ==> "上海市浦东新区三林路1518号"
    	function getDetailsTX(local, callback) {
    		// local 是个数组 [lat, lng]
    	    $.ajax({
    	        type: 'get',
    	        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
    	        data: {
    	            location: local.toString(), // 需要这样 39.984104,116.307503 参数格式
    	            get_poi: 1,
    	            key: key,
    	            output: 'jsonp' // 防止跨域
    	        },
    	        dataType: "jsonp", 
    	        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
    	        success: function(res){
    	            callback(res.result.address); //address
    	        }
    	    })
    	}
    
    1. 计算两点之间距离 直线
    // 开始坐标点 和 结束坐标点
    var start = new qq.maps.LatLng(start_lat, start_lng),  
    	end = new qq.maps.LatLng(end_lat, end_lng);
    var total = Math.round(qq.maps.geometry.spherical.computeDistanceBetween(start, end) * 10) / 10;
    
    1. 去除腾讯地图logo
    	// 去除腾讯地图logo
        $("#container").bind("DOMNodeInserted",function(e){
            var tempCount = 0;
            $("#container .smnoprint").siblings().each(function(){
                tempCount++;
                if(tempCount==2||tempCount==3){
                    $(this).remove();
                }
            });
        });
    

    以上 就是此次用到的地方 后续如果还有用到会进行更新

    展开全文
  • 背景图片定位

    千次阅读 2018-08-28 13:29:16
    一、 网页中添加图片的方式有两种 一种是:通过&lt;img&gt;...另一种是:通过css背景属性添加二、 怎样来判断添加...三、 背景图片定位决定因素:   a. 设置背景图片容器的大小(宽度和高度) b. 首...

    一、 网页中添加图片的方式有两种

    一种是:通过<img>标签直接插入到html中
    另一种是:通过css背景属性添加

    二、 怎样来判断添加图片方式?

     

    1: 网页中的装饰性的图片,通过背景图片添加。

    2:用户图片,通过插入形式添加。

    3:按钮,有多个状态的效果图片,通过背景图片添加。

    三、 背景图片定位决定因素:

     

    a. 设置背景图片容器的大小(宽度和高度)

    b. 首先要定义背景图片(background-image)

    c. 其次是背景图片是否重复(background-repeat)

    四、 背景图片定位(background-position)原理

    A. 语法:Background-position:水平位置 垂直位置

    B. 水平位置/垂直位置设置方法:

    1) 数值(px)正负值都可以

    2) 百分比(%)范围:0%—100%

    3) 关键词:水平位置:left(左) center(中) right(右)

    垂直位置:top(上) center(中) bottom(下)

    注意:当只设置一个值时:代表水平位置,垂直位置默认居中

     

    我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body、td、p等的背景,道理一样。

    代码:

    div{ background:#FFF url(image) no-repeat fixed x y;}

    这里的background的属性值依次为:

    #FFF 背景色:(颜色值,背景图片没有覆盖的地方,或者没有背景图片时表现的背景色)
    image 背景图片:(这里是图片的地址)
    no-repeat 是否重复:(图片小于容器的大小时,默认会重复排列图片以填满容器,no-repeat表示不重复,只有这个时候后面的定位坐标才有用。)
    fixed 背景是否随容器滚动:(有两个可选值,scroll滚动,fixed不滚动,默认是scroll)
    x y 背景图像的定位:(注意,只有在no-repeat下定位才有意义。这个就是今天要讲的重点)。

    展开全文
  • web自动化测试元素定位方法

    千次阅读 2020-09-08 20:28:50
    一、做自动化测试脚本的时候,我们通常...在浏览上能显示所有的要素,如图片、文本框、按钮、下拉列表、视频等… 如何定位页面元素? selenium webdriver中提供了8中页面元素定位方式,如下: 1、id属性定位->fin

    一、做自动化测试脚本的时候,我们通常会有如下的步骤:

    1. 通过某些方式定位到我们要执行的对象、目标(Target)
    2. 对这个对象进行什么操作(command)
    3. 通过操作对定位到的元素赋值(value)
    4. 添加断言操作

    二、首先要解决的是元素定位问题,这个内容分开来讲就是何为页面元素?如何定位?

    1. 什么是页面元素?

    在浏览上能显示所有的要素,如图片、文本框、按钮、下拉列表、视频等…

    1. 如何定位页面元素?

    selenium webdriver中提供了8中页面元素定位方式,如下:

    1、id属性定位->find_element_by_id(“id属性值”)

    最常用的一种元素定位方式,一般情况下ID属性不会重复,但不排除特殊情况。
    两种不同导入时间方法

    from selenium import webdriver
    #from time import sleep#导入time模块sleep方法
    #sleep(3)#就可以直接使用
    ##
    import time
    time.sleep(3)#加时间使用,指多少时间之后开始操作 
    

    用id属性值定位

    #导包、创建浏览器对象、获取一下url地址
    from selenium import webdriver
    import time
    
    #driver:就是一个普通的变量,dr也行
    driver = webdriver.Chrome()#用谷歌浏览器打开,注意:浏览器首字母大写
    driver.get("https://www.baidu.com")#get要打开的网站
    
    #通过ID来定位文本框和百度一下
    driver.find_element_by_id("kw").send_keys("selenium")#输入值
    time.sleep(2)
    driver.find_element_by_id("su").click()#id定位后点击搜索
    time.sleep(2)#两秒后触发
    
    #退出浏览器对象
    driver.quit()
    

    2、name属性定位->find_element_by_name(“name属性值”)

    name属性可能会出现重复,建议开发要保证ID或者那么有一个不能重复。

    #导包、创建浏览器对象、获取一下url地址
    from selenium import webdriver
    import time
    
    #driver:就是一个普通的变量,dr也行
    driver = webdriver.Chrome()
    driver.get("https://www.baidu.com")
    
    #通过name属性定位元素
    driver.find_element_by_name("wd").send_keys("selenium")
    time.sleep(2)
    driver.find_element_by_id("su").click()
    time.sleep(2)
    #退出浏览器对象
    driver.quit()
    

    3、class 属性定位->find_element_by_class_name(“class属性值”)

    对某些具有相同类的元素一网打尽的好方法

    from selenium import webdriver
    # from time import sleep #要么用from xx import xx 方法 要么用直接import xx导入
    import time
    driver=webdriver.Chrome()
    driver.get("https://www.baidu.com")
    aa=driver.find_element_by_class_name("c-color-t").click()#根据类名的方法定位便签
    time.sleep(3)
    driver.quit()
    

    4、tag name:->find_element_by_tag_name(“标签名”)

    重复率高,定位效率低,基本不用

     from selenium import webdriver
     from time import sleep
     driver=webdriver.Chrome()
     driver.get("https://www.baidu.com")
     aa=driver.find_elements_by_tag_name("a")#根据标签定位,输出的是一个列表
    #  print(aa)
     for i in aa[7:9]:#用遍历的方法取出
         i.click()#点击取出的超链接
     sleep(3)
     driver.quit()#退出
    

    5、link text:->find_element_by_link_text(“链接的显示文本”)

    超链接的显示文本信息,较为常用,参数是全部文本信息。精准的根据参数名字打开超链接

    from selenium import webdriver
    from time import sleep
    driver=webdriver.Chrome()
    driver.get("https://www.baidu.com")
    driver.find_element_by_link_text("学术").click()#必须精准写出全名
    sleep(3)
    driver.quit()
    

    6、partial link text:->find_element_by_partial_link_text(“部分链接的显示文本”)

    超链接的显示文本信息,较为常用,参数是部分文本信息即可,相当于模糊查询

    from selenium import webdriver
    from time import sleep
    driver=webdriver.Chrome()
    driver.get("https://www.baidu.com")
    driver.find_element_by_partial_link_text("hao").click()#可以模糊查询
    sleep(3)
    driver.quit()
    

    7、css:->find_element_by_css_selector(“css”)

    • 表示class类选择器,.s_ipt,.s_btn
    • 表示ID选择器,#kw、#su
    • 表示父子关系,form#form > span > input
    • 直接通过浏览器复制:#su
    from selenium import webdriver
    import time
    driver=webdriver.Chrome()
    driver.get("https://www.baidu.com")
    #driver.find_element_by_css_selector('.s_ipt').send_keys("selenium")#类的选择方式
    driver.find_element_by_css_selector("form#form > span > input#kw").send_keys("selenium")#表示父子关系
    time.sleep(1)
    # driver.find_element_by_css_selector('.s_btn').click()#类的方法
    driver.find_element_by_css_selector('#su').click()#地址方法
    time.sleep(3)
    driver.quit()
    

    三、注意事项

    • 建议与开发协商,保证id属性的唯一性,优先使用id进行定位
    • 动态id属性时,建议使用xpath的相对路径定位
    • 灵活使用元素等待,避免因页面加载而导致的定位失败
    • css是配合html来工作,它实现的原理是匹配对象的原理,而xpath是配合xml工作的,它实现的原理是遍历的原理,所以两者在设计上,css性能更优秀、语言更简洁,明了
    • 总之一句话,不管哪种方式,以能唯一定位到元素为准
    展开全文
  • Web测试中定位bug方法

    万次阅读 多人点赞 2018-01-18 17:49:25
    web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,进一步了解这个...bug定位常用工具 Firefox——firebug、web developer、live http headers、http fox IE插件——httpwatch 第

    在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,进一步了解这个BUG的问题出在那里,是测试人员需要掌握的,可以简单的使用浏览器自带开发者工具、数据库工具配合去排查。

    bug定位常用工具

    Firefox——firebug、web developer、live http headers、http fox

    IE插件——httpwatch

    第三方工具——fiddler

    慢速网模拟工具——firefox throttle

    前台错误

        前台的bug通常是功能、界面和兼容性等有关,涉及到jstl,jsp,js,css,html方面比较多。bug主要有两块,第一就是JS写的有问题,这个你可以按F12 打开控制台,在console中查看报错信息,一般浏览器都会显示报错的jS ,对于出错的js可以在Sources下查看对应报错的资源文件,基本上都会找到错误原因的变量未定义,参数未定义等,JS错误都很好解决的。

     

    第二个就是页面中的bug了,现在做web项目基本上没有做静态页面的都是动态了,所以你页面中要么使用了小脚本要么使用了EL表达式来存值。页面报错的话 在控制台是可以看到你错误行号和附近代码的,你自己去找就行了。

     

    图片不显示,谷歌浏览器右键点击图片,点击【检查】,(火狐浏览器右键点击【使用firebug查看元素】)在打开的控制台上找出图片的属性,输入到浏览器的地址内,如果能打开图片,那么不显示图片的问题就是后台的问题;如果浏览器内不能打开图片,那么就是前端的问题。

     

    开发者工具的使用(chrom浏览器)

    (1)打开开发者工具,在浏览器菜单栏选择工具-开发者工具,快捷键是F12

    (2)打开之后切换到Network页签,操作就可以看到请求响应

    (3)再选择响应的链接,切换到Preview页签,可以看到响应的结果数据;切换到Headers页签可以看到请求的地址,请求的方式,结果等信息

    (4)Response结果中可以看到返回的数据字段、值

    de424c985908b14704348c24493989a5.png-wh_


    aea634eca2fab5203ec2584fc5d17a1f.png-wh_


    88588cb57527e19f429bb9801c83cebf.jpg-wh_


    可以根据响应的值判断一些bug所在

    (1)响应中没有数据,则是后端数据没有返回,前端展示为空,则为后端问题。例如:列表中新增一个数据,没有显示,通过请求中可以看到数据total为0,则是后端数据没有返回。

    (2)响应中有数据,但是前端显示错误了,可以根据字段值判断是否前端显示中取错了字段显示,可以判断是前端问题。例如:B端显示内容错误了,把登录用户名显示了登录帐号,则可以在响应中看数据是否返回正确,返回正确而显示错误,则有可能是前端绑定字段错误。

    (3)响应中有数据,但是跟自己操作的结果不一致,可以根据数据库查询,如果数据库中也没有记录,可能是代码有问题,没有记录你的操作。例如:注册了一个帐号,但是登录时提示帐号或密码错误,这就可以在数据库表中查看是否有注册的数据。

    后台错误

    根据后台日志文件查找错误
        
    后台涉及到servlet,jms,ejb,还有很多框架,struts,hibernate,spring,ibatis等。bug 比较难改,但是好找。主要就是看控制台报错,然后定位错误行号。如果配置文件没有问题,那么一般的报错就是空指针,或者是数组下标越界。看附近变量,看方法的参数基本上都可以定位错误了

     

    重启的一般情况:
    (1)热部署 (新增部分功能,或者修改部分bug) (2)发布新版本 (整个系统)(3)内存溢出,此时重启服务器即可

    由于项目中有线程程序,./shutdown脚本关闭tomcat程序,不能把启动的线程全部关闭,造成服务器启动线程未关闭的错误,所以
    Linux系统中重启Tomcat的一般步骤:(一般是先关闭进程,然后进行重启 ,如果 /要删除某个文件:rm 文件名,或者不为空的文件夹:rm -rf 文件夹名)
    cd usr/local/        //测试服务器名称/bin
    ps -exf            //看测试服务器下运行的项目的主进程(最前面的数字为PID进程号)
    kill -9 PID         //强制关闭某一项目的主进程
    ./startup.sh         // ./**.sh 即执行重启shell脚本文件 ,此时在测试服务器的bin下面,直接执行即可,其余的加上 chmod a+x shell脚本文件,也可用./执行
    (小知识:
    ps aux和ps -ef命令区别
    ps aux 是用BSD的格式来显示 java这个进程
    显示的项目有:USER,PID,%CPU,%MEM,VSZ,RSS,TTY,STAT,START,TIME,COMMAND
    ps -ef 是用标准的格式显示java这个进程
    显示的项目有:UID,PID,PPID,C,STIME,TTY,TIME,CMD)


    如何查看日志
    一台服务器可以部署多个应用
    cd usr/local/测试服务器名称/logs   //查看先进入到服务器的logs目录下
    tail -f catalina.out          //监视catalina.out 文件的尾部内容(默认10行)
    日志中常见的问题
    获取日志文件中常遇到的问题:
    (1)编码问题:tomcat是新的,需要改编码修改tomcat的server.xml文件<Connector port="8080"URIEncoding="UTF-8"/>
    特别是windows下的项目重新部署到linux系统下,
    (2)空指针:程序问题,一般没有考虑到为空情况,或者主外键约束的数据为空,或者删除关联数据,导致为空
    (3)长度过长,超过最大长度,测试环境修改数据库字段长度后生产环境未修改,导致报错!!
    (4)非法数据
    (5)内存溢出:重启

     

    一般的问题原因总结
    程序:为空判断,增删改查,不同公众号调用的接口也不一样
    数据初始化:数据库表结构和数据初始化,权限配置,

     

    故障无法重现时:
    (1)看日志,根据日志定位原因,则在测试环境中按照日志提示构造条件相同的测试案例测试,尝试在测试环境中将问题重现。问开发
    (2)测试环境和配置与实际的工程环境和配置有哪些差异等等。同时主动与开发负责人、工程实施人员以及有经验的项目经理讨论,分析可能导致的原因。

    配置环境不一致导致
    测试环境ok,生产环境新增时保存失败,查看后台日志报长度溢出,数据库内容字段要求和生产环境不一致

     

    辅助工具:linux和SQL
    linux
    查看日志
    SQL用来筛选数据或直接进行数据修改状态,多用于集成测试过程中前后流程相连接

     

    jsp分不清前后台的,因为这里涉及到一个运行时刻的问题,它们的运行时刻是不同。用户发出请求后,服务器解析用户请求,转至对应的jsp,这个时候可以说是整个jsp都是后台程序。而Jsp做出响应后,把响应的内容返回给浏览器,这个时候浏览器就只看见html,css,javascript,这个时候所有的程序又都是前台程序。

    火狐浏览器的web控制台

    打开方式如下:菜单上点击【工具】

    bc25a74bac41de4c9a4d9881c993d418.jpg-wh_

    Web控制台页面显示

    b9392591cd30dbf84cd0d4baed4d4a2a.jpg-wh_


    谷歌浏览器开发者工具

    按F12打开,页面显示如下:

    eb2c5f257c033e69c47bd93ea4f59a16.jpg-wh_

    Element标签:该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可以看到布局,可以看到用到的样式,还有用到的链接等等。

    console标签:这个就是一个web控制台,可以查看网页运行后提示的消息,错误或者警告以及输出内容等

    sources标签:这个是显示资源文件的,可以查看运行的脚本,调试一般都是在Sources调试的

    30fcfc31e43937366e181b3ae5af5684.jpg-wh_

    1.该选择框使用来选择资源的,当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
    2.这个地方使用来调试js代码的地方,这个非常重要,看到行号上面有蓝色的标签,这个标签就是断电,当我们需要调试程序的时候打一个断电,然后通过3这个工具栏进行调试,那么调试过程就不详细解释,也就是打一个断电然后刷新页面程序会调到你打断点的地方,然后通过4来查看程序中变量的值什么的。
    3.中的标签,第一个是停止状态的按钮就是表示程序是否停止(在debug时),后面的是程序继续跳过方法,跳过下一个语句,调到上一个语句。

    Network标签:这个就是抓包常用的工具,可以看到网页加载的脚本和资源的时间,还可以看到某些不能加载成功的资源

    43423f8710661569e993ebc2f1e9aecc.jpg-wh_

    那么这个页面就是用于抓包的页面,我们需要分析页面的请求,比如模拟登陆什么的都需要去分析程序是怎么在后台执行的,接下来就,我们可以看到Headers(请求消息头) Preview(预览) Response(响应) Timing(请求时间)Cookie这些东西

    最上面还有一个工具栏,有一个红色的圆点静止符号的按钮,那么这两个按钮,当为红色按钮的时候表示当前的请求不被清空(但是这里的请求是不跳转页面的请求,当跳转到新的页面,那么也会请求也会被清空),后面这个按钮就是清空请求的。

    下面还有一行工具栏,这个工具栏主要是用来选择和过滤请求消息的。

    再下面可以看到时间线,这个就是记录一个请求开始到结束的时间。

    注意:当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log,同时让红色按钮显示红色

    TimeLiness标签:这个就是请求时间

    展开全文
  • Web 地理定位(Geo-Location)知识大全

    千次阅读 热门讨论 2010-03-12 14:21:00
    仅仅是定位你现在的位置,就有很多技术,有幸的是,如今在你的 Web 站点中,你可以通过短短的几行代码,获得一个用户的地理位置,本文介绍的是用在 Web 中的各种地理定位技术。通过 IP 地址获得用户的地理位置信息...
  • 示意图如下(图片来自W3CSchool): 2.绝对定位 看下面的一段代码: <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Document title > ...
  • 本文实例为大家分享了webAPI实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现图片放大的效果 做这个之前需要会 事件对象.clientX 这个是X轴 事件对象.clientY 这个是Y轴 1.元素.offsetLeft 获取盒子...
  • ![图片说明](https://img-ask.csdn.net/upload/201511/20/1447988432_564192.png) 就是这个地方实现自动定位并且显示出来。。。谢谢各位大神!!!!!
  • 在VS2010中开发web,现在已经能成功调用百度地图api显示在网页上,我现在想做读取数据库的经纬度信息,然后定位在地图上(PS:会读数据库,只是不知道怎么把) ![图片说明]...
  • 按理说介个运行出来应该是之间有白色边界的(图片圈出来的地方)但是为什么它没有呢,是哪里写错了还是写少了啥[face]monkey:0.gif[/face] 附上代码: <!DOCTYPE html> <html lang="en"> <head> &...
  • 是一款效果不错的菜单,在设计方面具有鲜明的风格。其实不管外在表现形式如何变化,经过分析,WEB界面元素都可以分解成具有语义的HTML编码。
  • 控制web前端图片位置

    千次阅读 2021-02-16 15:52:06
    控制图片位置: 距离页面右端 margin-right:200px 距离页面左端: margin-left:200px 距离页面顶部: margin-top:200px 距离页面底部: margin-bottem:200px
  • 移动端web页面图片呈现方式

    千次阅读 2019-05-21 17:33:26
    移动端web页面,涉及到图片,都是需要去考虑图片的适配的,一般原则是定宽不定高,定高不定宽,图片按照一个规则来,要么按高度100%,宽度自适应。要么宽度100%,高度自适应. 实际操作中,直接设置如下样式,基本...
  • Linux 快速定位web路径方法

    千次阅读 2014-01-06 07:48:18
    在一个虚拟主机的服务器上,有NN多站,可能我们通过某种途径搞到了一个webshell,可是找不到apache等web服务器的配置文件,找不到其他web的路徑,21f9c57b84sZmrkR这个时候就郁闷了。假如服务器上有几百个网站,...
  • 如何定位web前后台的BUG

    万次阅读 2017-05-09 12:13:27
     并不是所有发布到生产环境的东西都需要在测试环境检验,如:图片样式改动,小bug修复,但是哪些免测是个复杂的问题   5.海量用户带来的挑战   1) 性能方面  如何做轻量级的 性能测试   2) ...
  • [JavaWeb]将Web页面内容生成图片

    万次阅读 2016-12-26 15:52:41
    [JavaWeb]将Web页面内容生成图片
  • 需求:拖动地图根据中心点定位,根据定位显示附近的信息,搜索提示 利用到的api: 当前定位——geolocation.getCurrentPosition() 根据城市搜索关键字——BMap.LocalSearch() 根据经纬度搜索附近的位置信息——...
  • 本文以矩形为例,最快上手图片定位,其他形状(shape)类似,难点在于coords定位法则不同。 一、(矩形)html代码 <map name="Map"> <area shape="rect" coords="60,300,225,365" href="examRule.jsp...
  • WEB应用图片的格式,以及各自的特点和优化(一) by FungLeo前言12年前我入行三天.用table布局做了一个非常粗糙的网页.我说了一句话,”网页就是表格加文字加图片,图片分两种,插入图片和背景图片”.这句话在今天看来,...
  • web上面显示地图并定位

    千次阅读 2017-11-09 22:41:24
    有时在web项目中会使用到地图的功能,这里简单粘贴一下使用高德地图的代码,主要是使用的js。 具体使用可以参考“高德地图开放平台”中的API以及示例! String path = request.getContextPath(); String ...
  • 定位(position) background-position 背景定位 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。 PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不...
  • WEB自动化测试中Xpath定位方法

    千次阅读 2018-03-16 16:21:44
    因为编辑按钮在最后一个div中,所以前面不管有多少图片的话他总是会定位到最后一个,如果要定位要其他的则在()输入数字即可。   差不多了,用以上这些方式进行定位基本能应付常规工作中的定位
  • web项目引用WEB-INF下面的图片例子

    万次阅读 2016-03-04 16:08:07
    jsp页面在 WebRoot\WEB-INF\jsp\foreground\login\newlogin.jsp 在此页面引用 WebRoot\WEB-INF\images\common\下面的图片文件 例子: 即:
  • 移动web图片高度自适应的解决方案

    千次阅读 2017-11-02 00:15:22
    由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动 针对这个问题,有以下几种解决方案 ...
  • 前言:最近刚刚接触到微信端的开发,使用到了web uploader 框架作为上传组件,初步接触,走进了很多坑,在不断的试验,查文档基础上终于解决了这个问题。再次记录,希望能够使其他使用此框架上传图片的初学者少走...
  • web端由于是固定的大小与left 、top,所以定位起来会比较准确、简单。但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位。所以普遍的做法都是使用单张...
  • Android 从WebServer 获取PDF转图片

    千次阅读 2015-12-28 14:46:18
    Android 获取Web服务器端的PDF文件时,在打开时得需要PDF打开工具,无法嵌入到自己的模块内,就想到,现将PDF转换成图片,在从Web下载下来。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 99,807
精华内容 39,922
关键字:

web图片定位