正文 

当前位置： 首页 > 知识 >

访问新网址赛普拉斯

     2023-02-19     61

关键词：

【中文标题】访问新网址赛普拉斯【英文标题】：Visit new url Cypress 【发布时间】：2020-08-15 07:32:11 【问题描述】：

我是赛普拉斯的新手。我的应用程序作为“路由系统”手动更改window.location.hash。 在某些时候，我单击了一个更改哈希的按钮，因此应该在测试期间更改页面。我可以在执行过程中看到一个“新 url”条目，但是如何让 cypress 访问该 url？

简而言之，问题是什么：您可以看到我输入了密码，然后输入了enter。运行测试可以看到地址栏的hash变化，但是页面并没有随着hash变化而变化。

这是测试代码

context("Workflow", () => 

    it("login", () => 

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demoenter").should("have.value", "demo") // this should redirect to "/#home"
        //cy.wait(10000)
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"
    )
)

编辑：经过无数次失败的尝试，我想出了一个部分有效、笨拙且笨拙的解决方案。我认为我不需要使用reload() 来解决这个问题（必须有更好的解决方案..），但要使其正常工作，我必须等待所有远程请求完成（否则reload() 会取消它们)。我说部分工作，因为如果我尝试先访问#login，然后按照#home 中的重定向，然后将页面更改为#browser，您可以从代码中的 cmets 看到，最后一个不起作用（我可以看到哈希更改为#browser，但页面仍然是#home）。

import 'cypress-wait-until';

let i = 0;

context("Workflow", () => 
    it("login", () => 
        cy.server( 
            onRequest: () => 
                i++;
            ,
            onResponse: () => 
                i--;
            
        );

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demouser").should("have.value", "demouser")
        cy.get("#password").type("demouser").should("have.value", "demouser")
        cy.get("form#formLogin").submit()

        cy.waitUntil(() => i > 0)
        cy.waitUntil(() => i === 0)
        cy.reload(); // it correctly change the hash AND the page to #home!

        cy.url().should("include", "#home") 
        cy.get(".version").contains( "v2.0.0-beta") // it works!!

        cy.get("a[data-id=browser]").click(force: true) // it correctly changes the hash to #browser
        cy.waitUntil(() => i > 0)
        cy.waitUntil(() => i === 0)
        cy.reload();

        // the hash in the address bar is #browser, but the web page is #home
    )
)

【问题讨论】：

你试过cy.visit()吗？ cy.visit() 将 url 作为参数。我不需要那个。我只需要访问菜单按钮指向的页面。 所以你点击了一个按钮，它会手动更改锚点 AKA window.location.hash。当您手动点击网页中的按钮时，您是否重定向到锚点？ 当然可以，网站本身也可以正常工作。整个问题是当我在 cypress 中运行它时，我使用 cy.find("#mybutton").click() 单击一个按钮，而 cypress 根本不会更改页面。 你说你点击了一个按钮，但上面的日志中没有显示。可能是因为cy.find("#mybutton") 是无效语法，请参阅here。显示测试代码会更有帮助。 【参考方案1】：

有一些方法可以做到这一点。其中一种基本方法是这样的：

  cy.visit(`your_login_page`)
  cy.get('[data-testid="input-username"]').type(`demo`,  force: true )
  cy.get('[data-testid="input-password"]')
    .type(`demo`, 
      force: true,
    )
    .wait(1000)
    .then(() => 
      cy.location().should((loc) => 
        expect(loc.pathname).to.eq(your_new_url)
      )
    )

您应该将data-testid 或findByTestId 添加到具有唯一ID 的元素中。 访问新网址可以使用cy.visit(loc.pathname)

【讨论】：

谢谢，在我的情况下是expect(loc.hash).to.eq("#home")，就好像你只改变了hash pathname 是一样的。无论如何，这种断言不会失败，但赛普拉斯实际上并没有根据哈希变化来改变页面。所以如果我尝试在主页上搜索一个元素，比如cy.get(".subtitle")，它会失败【参考方案2】：

赛普拉斯有一个名为url:changed 的事件。请参阅关于事件 here

的文档

使用这个，像这样可能工作：

context("Workflow", () => 
    it("login", () => 

        cy.on('url:changed', url => 
            cy.location('hash').then(hash => 
                if (!url.endsWith(hash)) 
                    cy.visit(url);
                
            );
        );

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demoenter").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    )
)

编辑：仅出于故障排除目的并专注于您的问题，您可以在没有cy.location() 的情况下尝试这样吗：

context("Workflow", () => 
    it("login", () => 

        cy.on('url:changed', url => 
            cy.visit(url);
        );

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demoenter").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    )
)

编辑：你试过cy.reload()

context("Workflow", () => 

    it("login", () => 

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demoenter").should("have.value", "demo") // this should redirect to "/#home"
        cy.reload();
        cy.get(".subtitle").should("have.value", "Welcome");
    )
)

【讨论】：

你的代码抛出错误：Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise. The command that returned the promise was: > cy.visit() The cy command you invoked inside the promise was: > cy.location() 还有一件事要尝试:) 还有一个submit() 命令可以用于form 元素，例如：cy.get('form').submit() 您是否尝试在 Chrome 而不是 Electron 中运行 cypress 测试？ 最后评论，我在 :) 之后放弃。我在使用 litElements 和 shadow DOM 搜索 cypress 时发现了这一点。 github.com/abramenal/cypress-shadow-dom【参考方案3】：

感谢所有解决问题的尝试，但对于“window.location.hash 更改时触发相关侦听器”这样简单的问题，它们都是棘手的解决方法。

问题的根源在于赛普拉斯中的错误。 window.location.hash 上的错误存在于 4.5.0 中，但它已在 4.5.0 和 4.12.1 之间的某个地方得到解决。

在4.12.1 中问题已解决。

【讨论】：

赛普拉斯：我们如何在赛普拉斯中使用不记名令牌编写 GET 请求？

...个是POST请求，另一个是get。首先，我通过帖子获取用户访问令牌，而在其他情况下，我使用此accessToken登录。我的代码不起作用。我正在使用窗口7和cypres 查看详情

赛普拉斯自定义命令无法识别

】赛普拉斯自定义命令无法识别【英文标题】：Cypresscustomcommandsnotrecognized【发布时间】：2019-06-0515:07:17【问题描述】：我想创建一个自定义登录命令。我已将命令添加到我的commands.js文件中，并且还将导入命令添加到index.js。当... 查看详情

赛普拉斯获取 href 属性

】赛普拉斯获取href属性【英文标题】：Cypressgethrefattribute【发布时间】：2018-06-2902:56:53【问题描述】：我有一个测试用例，其中有一个在新选项卡中打开的链接。由于赛普拉斯不支持多个选项卡，我想获取该链接的href属性，然... 查看详情

赛普拉斯抛出 SecurityError

...个错误：SecurityError:Blockedaframewithorigin"http://localhost:3000"从访问跨域框架。如果有解 查看详情

单击赛普拉斯中的完全匹配文本

】单击赛普拉斯中的完全匹配文本【英文标题】：ClickanexactmatchtextinCypress【发布时间】：2019-10-1923:43:39【问题描述】：在Cypress中，.contains命令会生成所有匹配的元素，因此对于单击带有文本的下拉项，.contains可以正常工作。但... 查看详情

带有 Ionic 应用程序的赛普拉斯：无法访问 ion-select-option，因为它“不可见”

】带有Ionic应用程序的赛普拉斯：无法访问ion-select-option，因为它“不可见”【英文标题】：CypresswithanIonicapp:cannotaccession-select-optionbecauseitis"notvisible"【发布时间】：2020-11-0822:15:25【问题描述】：我有一个离子/角度应用程... 查看详情

使用 Metamask 进行测试的赛普拉斯测试方法

...以类似于普通“登录”的方式通过“安装”Metamask接口来访问应用程序\'在AssertJS(2018)讲座视频中完成（我使用 查看详情

在赛普拉斯测试中加载页面后，如何可靠地等待 XHR 请求？

...：2018-09-2120:18:04【问题描述】：在我的应用程序中，当我访问一个页面时，它会发出一些网络请求来获取数据并将其显示在页面上。之后，您单击按钮并填写字段以过滤该数据。我有一个cypress测试，它基本上会访问页面， 查看详情

有没有办法强制赛普拉斯在同一个标​​签而不是另一个标签中打开

】有没有办法强制赛普拉斯在同一个标​​签而不是另一个标签中打开【英文标题】：Isthereawaytoforcecypresstoopeninsametabinsteadofanothertab【发布时间】：2020-10-1211:21:24【问题描述】：我知道赛普拉斯的权衡之一是在多个选项卡上进行... 查看详情

赛普拉斯可以运行在赛普拉斯文件夹之外导入的测试文件吗？

】赛普拉斯可以运行在赛普拉斯文件夹之外导入的测试文件吗？【英文标题】：CanCypressruntestfilesimportedoutsideofCypressfolder?【发布时间】：2020-10-2601:56:42【问题描述】：我正在使用Cypress开发E2E测试框架，并希望导入Cypress目录之外... 查看详情

赛普拉斯/GitLab CI/CD 集成 - 赛普拉斯不会在无头模式下启动

】赛普拉斯/GitLabCI/CD集成-赛普拉斯不会在无头模式下启动【英文标题】：Cypress/GitLabCI/CDintegration-Cypresswon\'tstartinheadlessmode【发布时间】：2021-12-0214:22:25【问题描述】：在Cypress中编写了几个测试并以无头和有头方式在本地尝试它... 查看详情

赛普拉斯：测试元素是不是不存在

】赛普拉斯：测试元素是不是不存在【英文标题】：Cypress:Testifelementdoesnotexist赛普拉斯：测试元素是否不存在【发布时间】：2018-08-0114:47:30【问题描述】：我希望能够单击一个复选框并测试一个元素是否不再在赛普拉斯的DOM中。... 查看详情

赛普拉斯断言文本

】赛普拉斯断言文本【英文标题】：Cypressasserttext【发布时间】：2021-12-2123:00:33【问题描述】：我需要断言的错误摘要中的这段代码有问题：<divid="#prices-form-wizard_es_"class="errorSummaryformSummary"style="display">==$0<ul><li>::mark... 查看详情

javascript赛普拉斯样品测试(代码片段)

查看详情

赛普拉斯 Github 操作失败

】赛普拉斯Github操作失败【英文标题】：CypressGithubActionFail【发布时间】：2021-10-2308:29:35【问题描述】：我将GitHubAction用于CI/CD，我从中编写了一些cypress测试和YAML文件。但是当我推送存储库时出现错误。name:CypressTests#Controlswhenthe... 查看详情

赛普拉斯条件断言

】赛普拉斯条件断言【英文标题】：Cypressconditionalassertions【发布时间】：2021-12-2220:50:44【问题描述】：我有一张像这样的桌子1/2abc/abcabc/bcaabc/cda现在我的代码是这样的cy.get(\'[role="row"]\').each(($el)=>cy.get($el).children().should(\'contain\... 查看详情

赛普拉斯：检查元素是不是存在无异常

】赛普拉斯：检查元素是不是存在无异常【英文标题】：Cypress:checkifelementexistswithoutexception赛普拉斯：检查元素是否存在无异常【发布时间】：2019-01-1611:55:50【问题描述】：我正在使用Cypress测试数据导出页面，该页面需要几分钟... 查看详情

赛普拉斯无法在 Windows 上启动

】赛普拉斯无法在Windows上启动【英文标题】：CypressfailedtostartonWindows【发布时间】：2018-06-2717:08:42【问题描述】：我刚刚使用“npminstallcypress--save-dev”安装了Cypress，并确认安装成功，详情如下已下载赛普拉斯解压柏树安装完成... 查看详情