小编Man*_*cal的帖子

Cypress和许多其他关于测试 Web 应用程序的帖子建议依赖数据属性，如data-cy或data-test-id用于定位元素，而不是依赖于id属性。

我的理解是有两个原因：

1. 重新使用组件的现代方式可能会导致具有多个相同类型的组件，并且可能导致IDs同一页面上有多个组件- 但这也应该适用于“data-cy”或“data-test-id” ' 属性。
2. 当IDs与 相关联时CSS，倾向于更频繁地更改它们，而data-*属性可能不太容易更改。

有人可以对建议多加说明吗？

我正在考虑的另一件事是要求我的开发人员将data-test*属性放在div会使用组件的标签上 - 这样测试属性实际上比组件id属性高一个级别，即使在多个实例相同的情况下也可能派上用场组件被使用。但同样，我不知道为什么id该属性div相比，当标签是坏的data-test*属性。

我遇到问题，因为页面未完全加载。我尝试了该cy.wait(1000)方法，我认为这不是一个好的解决方案，但仍然不起作用，页面未完全加载。

这是我正在尝试测试的网站https://www.24mx.ie/。代码在文件中homePage.js。

class HomePage {
  static loadHomePage() {
    cy.visit(Cypress.env('url') + '.ie/');
    cy.wait(1000)      
  }

  static acceptCookies() {
    cy.get('div.m-button.m-button--navigation.m-button--xs.qa-consent-agree-btn.ng-tns-c95-8').click();
  }
}

export default HomePage

文件 homePage.spec.js 中的代码

import HomePage from '../pageObjects/homePage'

describe('Home Page Test', function () {
    it('Home Page TC', function () {
        HomePage.loadHomePage();
    })

    it('Accepting Cookies TC', function () {
        HomePage.acceptCookies();
    })

})

这是测试的打印屏幕：

我是第一次使用Github Actions 。我正在使用Vue-CLI并且我想创建一个作业来检查我的文件push并中断构建过程（如果有）ESLint'errors.

这是我package.json的脚本：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
},

这是我的.github/workflows/main.yml文件：

name: Lint files on push

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install modules
        run: npm install
      - name: Run ESLint
        run: npm run lint

我使用这个模板作为灵感。正如您在下面的屏幕截图中看到的那样。该作业已成功完成，但它不会破坏构建或修复 linting。我究竟做错了什么？

我正在使用这个Weather API构建一个天气应用程序。我正在尝试添加一个<input>字段值，当它更改城市名称时，然后更新其他值预测。

我创建了<input>更新城市值的字段，它应该相应地更新天气预报。我知道它v-model正在工作，但是它不会改变数据结果。仅当我在数据中硬编码不同的城市时，Vue-instance才会更新更改。

<template>
  <div class="home">
    <h1>{{ msg }}</h1>
    <p>A weather app built Vuejs & Open Weather App. Made by Manuel Abascal</p>
    <input type="text" v-model.lazy="currentWeather.name">
    <div class="forecast">
     <div v-if="this.currentWeather">
      <!-- Forecast stat values -->
      <h2>Right now:</h2>
      <div><strong>City:</strong> {{ currentCity }}</div>
      <div><strong>Longitude: </strong> {{ currentWeather.coord.lon }}</div>
      <div><strong>Latitude: </strong> {{ currentWeather.coord.lat }}</div>
      <div><strong>Weather condition </strong> {{ currentWeather.weather[0].description }}</div>
      <div><strong>Temperature Mid: </strong> {{  currentWeather.main.temp }} Farenheit</div>
      <div><strong>Temperature Max: </strong> {{  currentWeather.main.temp_max}} Farenheit</div>
      <div><strong>Temperature …

我试图创建一个事件，当按下某个键时会执行一个功能。我添加了一个eventListener，它寻找一个keypress === 13（输入键），但它并不令人担心，并且控制台上没有错误消息。在我看来，我eventListener也可以访问全局范围内的函数addItem。我真的不知道为什么它不起作用。

HTML：

<div class="container w-25">
  <div class='header'>
    <input class='mt-50' type='text' id='myInput' placeholder='Add a to-do'>
    <button id='btn' type='button'>Add</button>
  </div>
  <div class='content'>
    <ul id='list'>
      <li>Clean cauldron</li>
      <li>Beat Drago</li>
      <li>Study for B.U.S.E.</li>
      <li>Win quidditch cup</li>
    </ul>
  </div>
</div>

JavaScript：

let close = document.getElementsByClassName('close');
let btn = document.getElementById('btn');
let myList = document.getElementsByTagName('li');
let myInput = document.getElementById('myInput');

for (let i = 0; i < myList.length; i++) {
    let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = …

我正在尝试在Playwright中做一些断言。我需要断言，在链接列表中，<a>所有链接都具有该属性href。但是，我不知道如何使用剧作家功能来实现这一点。

我的代码在这里：

test.only('then a list of 44 links is displayed', async({ page }) => {
         const linkList = await page.locator('div#content > ul > li > a');
         for(let i = 0; i < await linkList.count(); i++) {
             expect(await linkList.nth(i)).toHaveAttribute('href', '');             }
         await expect(linkList).toHaveCount(44);
    })

toHaveAttribute()函数需要 2 到 3 个参数，因为它获取键属性和属性的值，但我只需要检查它是否具有 href 属性。

我怎样才能做到这一点？

这是正在测试的网站： https ://the-internet.herokuapp.com/

抱歉，我需要有关通过 cypress.io 查找元素 v-select 和 select 选项的帮助。

<v-select
      label="label"
      v-model="ccRcode"
      ref="ccRcode"
      :items="getData"
      item-text="descWithCode"
      item-value="code"
      value="{ ccRcode }"
      data-test='test'
></v-select>

我正在使用Phaser.io

我想使用A, S, D,W键。我知道你可以像这样使用箭头键：

create(){
  ...
  gameState.cursors = this.input.keyboard.createCursorKeys();
}

update(){
  if (gameState.cursors.left.isDown) {
    gameState.player1.setVelocityX(-160);
  } else if (gameState.cursors.right.isDown) {
    gameState.player1.setVelocityX(160);
  }
}

我试图切换.left.为.A.与.right.对.D.，但它不工作。

有任何想法吗？

我使用Cypress.io进行自动化测试并使用Github Actions在 CI/D 中触发它。配置cypress.json文件具有嵌套env值，如下所示：

{
  "baseUrl": "<url-to-login>",
  "env": {
    "roles": {
      "admin": {
        "PASSWORD": "<password>",
        "USERNAME": "<username>"
      },
      "employee": {
        "PASSWORD": "<password>",
        "USERNAME": "<username>"
      },
      "client": {
        "PASSWORD": "<password>",
        "USERNAME": "<username>"
      }
    }
  }
}

不幸的是，Cypress 无法访问深层环境变量，因此我创建的配置cypress.json如下：

name: Cypress Tests

on: [push]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        # creates cypress.json file to run Cypress
      - name: Create Cypress config files
        run: |
          echo …

点击按钮后如何重新启动游戏？我尝试了以下代码：

this.scene.stop();
this.scene.start();

场景重新加载，但预加载功能不再起作用。