mirror of
https://github.com/tauri-apps/tauri-docs.git
synced 2026-01-31 00:35:16 +01:00
fix: i18n pages structure (#2193)
This commit is contained in:
Simon Hyll
@@ -11,6 +11,10 @@
|
||||
"label": "Español",
|
||||
"lang": "es"
|
||||
},
|
||||
"it": {
|
||||
"label": "Italiano",
|
||||
"lang": "it"
|
||||
},
|
||||
"zh-cn": {
|
||||
"label": "简体中文",
|
||||
"lang": "zh-CN"
|
||||
|
||||
@@ -191,7 +191,7 @@ Aquí está el archivo como un script plano: [rustup.sh](https://sh.rustup.rs/)
|
||||
|
||||
Asegúrate de reiniciar tu Terminal (y en algunos casos tu sistema) para que los cambios surtan efecto.
|
||||
|
||||
Siguiente: [Configurar para Móvil](#configurar-para-móvil) si deseas construir para Android e iOS. De lo contrario, [Crea un Proyecto](/start/create-project/).
|
||||
Siguiente: [Configurar para Móvil](#configurar-para-móvil) si deseas construir para Android e iOS. De lo contrario, [Crea un Proyecto](/start/create-project).
|
||||
|
||||
## Configurar para Móvil
|
||||
|
||||
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
@@ -1,108 +0,0 @@
|
||||
---
|
||||
title: 애플리케이션 디버깅
|
||||
description: 디버깅 작업 흐름을 위한 팁과 요령
|
||||
---
|
||||
|
||||
import CommandTabs from '@components/CommandTabs.astro';
|
||||
|
||||
Tauri의 모든 움직이는 부분에는 디버깅이 필요한 문제가 발생할 수 있습니다. 오류 상세 정보가 출력되는 위치가 많이 있어, Tauri에는 디버깅 프로세스를 보다 간단하게 만드는 몇 가지 도구가 포함되어 있습니다.
|
||||
|
||||
## Rust 콘솔
|
||||
|
||||
오류를 찾는 첫 번째 장소는 Rust 콘솔입니다. 터미널에 `tauri dev`를 실행합니다. 다음 코드를 사용하여 Rust 파일 내 해당 콘솔에 무언가를 인쇄할 수 있습니다:
|
||||
|
||||
```rust
|
||||
println!("Message from Rust: {}", msg);
|
||||
```
|
||||
|
||||
때로는, Rust 코드에 오류가 있을 수 있고, Rust 컴파일러는 많은 정보를 제공할 수 있습니다. 예를 들어, `tauri dev`가 충돌하는 경우, Linux 및 macOS에서 다음과 같이 다시 실행할 수 있습니다:
|
||||
|
||||
```shell
|
||||
RUST_BACKTRACE=1 tauri dev
|
||||
```
|
||||
|
||||
혹은 윈도우에선 아래와 같습니다.
|
||||
|
||||
```shell
|
||||
set RUST_BACKTRACE=1
|
||||
tauri dev
|
||||
```
|
||||
|
||||
이 명령은 세분화된 추적 스택을 제공해줍니다. 일반적으로, Rust 컴파일러는 다음과 같은 문제에 대한 자세한 정보를 제공하여 도움을 줍니다.
|
||||
|
||||
```
|
||||
error[E0425]: cannot find value `sun` in this scope
|
||||
--> src/main.rs:11:5
|
||||
|
|
||||
11 | sun += i.to_string().parse::<u64>().unwrap();
|
||||
| ^^^ help: a local variable with a similar name exists: `sum`
|
||||
|
||||
error: aborting due to previous error
|
||||
|
||||
For more information about this error, try `rustc --explain E0425`.
|
||||
```
|
||||
|
||||
## WebView 콘솔
|
||||
|
||||
WebView에서 우클릭한 후, `요소 검사`를 선택합니다. 이렇게 하면 익숙한 Chrome 또는 Firefox 개발 도구와 유사한 웹 검사기가 열립니다. Linux 및 Windows에서는 `Ctrl + Shift + i` 단축키를 사용하고 macOS에서는 `Command + Option + i` 단축키를 사용하여 속성을 열 수도 있습니다.
|
||||
|
||||
검사기 창은 플랫폼에 따라 다르며 Linux의 webkit2gtk WebInspector, macOS의 Safari 검사기 창 및 Windows의 Microsoft Edge DevTools를 렌더링합니다.
|
||||
|
||||
### 프로그래밍으로 Devtools 열기
|
||||
|
||||
[`WebviewWindow::open_devtools`][] 및 [`WebviewWindow::close_devtools`][] 기능을 사용하여 검사기 창을 제어할 수 있습니다.
|
||||
|
||||
```rust
|
||||
tauri::Builder::default()
|
||||
.setup(|app| {
|
||||
#[cfg(debug_assertions)] // 디버그 빌드에만 이 코드를 포함
|
||||
{
|
||||
let window = app.get_webview_window("main").unwrap();
|
||||
window.open_devtools();
|
||||
window.close_devtools();
|
||||
}
|
||||
Ok(())
|
||||
});
|
||||
```
|
||||
|
||||
### 프로덕션에서 요소 검사 사용하기
|
||||
|
||||
기본적으로, 요소 검사는 Cargo 기능으로 활성화하지 않는 한 개발 및 디버그 빌드에서만 활성화됩니다.
|
||||
|
||||
#### 디버그 빌드 생성하기
|
||||
|
||||
디버그 빌드를 생성하기 위해선 `tauri build --debug` 명령을 실행해야 합니다.
|
||||
|
||||
<CommandTabs
|
||||
npm="npm run tauri build -- --debug"
|
||||
yarn="yarn tauri build --debug"
|
||||
pnpm="pnpm tauri build --debug"
|
||||
cargo="cargo tauri build --debug"
|
||||
/>
|
||||
|
||||
일반 빌드 및 개발 프로세스와 마찬가지로 빌드는 이 명령을 처음 실행할 때 약간의 시간이 걸리지만 후속 실행에서는 훨씬 더 빠릅니다. 최종 번들 앱에는 개발 콘솔이 활성화되어 있으며 `src-tauri/target/debug/bundle`에 배치됩니다.
|
||||
|
||||
터미널에서 빌드된 앱을 실행하여 Rust 컴파일러 노트(오류가 있는 경우) 또는 `println` 메시지를 제공할 수도 있습니다. `src-tauri/target/(release|debug)/[app name]` 파일을 찾아 콘솔에서 직접 실행하거나 파일 시스템에서 실행 파일 자체를 두 번 클릭합니다(참고: 콘솔은 이 방법으로 오류를 종료합니다).
|
||||
|
||||
#### Devtools 기능 활성화
|
||||
|
||||
:::주의
|
||||
|
||||
이 devtools는 macOS에서 비공개 API입니다. MacOS에서 비공개 API를 사용하면 애플리케이션이 App Store에 승인되지 않습니다.
|
||||
|
||||
:::
|
||||
|
||||
프로덕션 빌드에서 devtools를 활성화하려면 `src-tauri/Cargo.toml` 파일에서 `devtools` Cargo 기능을 활성화해야 합니다.
|
||||
|
||||
```toml
|
||||
[dependencies]
|
||||
tauri = { version = "...", features = ["...", "devtools"] }
|
||||
```
|
||||
|
||||
## 핵심 프로세스 디버깅
|
||||
|
||||
핵심 프로세스는 Rust로 구동되므로 GDB 또는 LLDB를 사용하여 디버깅할 수 있습니다. [VS Code에서 디버깅][] 가이드에 따라 LLDB VS Code 확장을 사용하여 Tauri 애플리케이션의 핵심 프로세스를 디버깅하는 방법을 알아볼 수 있습니다.
|
||||
|
||||
[VS Code에서 디버깅]: /ko/develop/debug/vscode
|
||||
[`WebviewWindow::open_devtools`]: https://docs.rs/tauri/2.0.0-beta/tauri/webview/struct.WebviewWindow.html#method.open_devtools
|
||||
[`WebviewWindow::close_devtools`]: https://docs.rs/tauri/2.0.0-beta/tauri/webview/struct.WebviewWindow.html#method.close_devtools
|
||||
@@ -1,86 +0,0 @@
|
||||
---
|
||||
title: VS Code 디버깅
|
||||
description: 디버깅 작업 흐름을 위한 팁과 요령
|
||||
---
|
||||
|
||||
This guide will walk you through setting up VS Code for debugging the [Core Process of your Tauri app].
|
||||
|
||||
## 사전 요구 사항
|
||||
|
||||
[`vscode-lldb`][] 확장을 설치합니다.
|
||||
|
||||
## launch.json 설정
|
||||
|
||||
`.vscode/launch.json` 파일을 생성하고 아래 JSON 내용을 복사해서 붙여 넣습니다:
|
||||
|
||||
```json title=".vscode/launch.json"
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Tauri Development Debug",
|
||||
"cargo": {
|
||||
"args": [
|
||||
"build",
|
||||
"--manifest-path=./src-tauri/Cargo.toml",
|
||||
"--no-default-features"
|
||||
]
|
||||
},
|
||||
// task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json`
|
||||
"preLaunchTask": "ui:dev"
|
||||
},
|
||||
{
|
||||
"type": "lldb",
|
||||
"request": "launch",
|
||||
"name": "Tauri Production Debug",
|
||||
"cargo": {
|
||||
"args": ["build", "--release", "--manifest-path=./src-tauri/Cargo.toml"]
|
||||
},
|
||||
// task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json`
|
||||
"preLaunchTask": "ui:build"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
이는 Rust 애플리케이션을 개발, 프로덕션 모드 모두에서 로드하기 위해 `cargo`를 직접 사용해 빌드합니다.
|
||||
|
||||
Tauri CLI를 사용하지 않으므로 전용 CLI 기능이 실행되지 않습니다. `beforeDevCommand`와 `beforeBuildCommand` 스크립트는 미리 실행하거나 `preLaunchTask` 필드에서 작업으로 구성해야 합니다. 다음은 개발 서버를 생성하는 `beforeDevCommand`와 `beforeBuildCommand` 두 가지 작업이 있는 `.vscode/tasks.json` 파일의 예입니다:
|
||||
|
||||
```json title=".vscode/tasks.json"
|
||||
{
|
||||
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
// for the documentation about the tasks.json format
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"label": "ui:dev",
|
||||
"type": "shell",
|
||||
// `dev` keeps running in the background
|
||||
// ideally you should also configure a `problemMatcher`
|
||||
// see https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson
|
||||
"isBackground": true,
|
||||
// change this to your `beforeDevCommand`:
|
||||
"command": "yarn",
|
||||
"args": ["dev"]
|
||||
},
|
||||
{
|
||||
"label": "ui:build",
|
||||
"type": "shell",
|
||||
// change this to your `beforeBuildCommand`:
|
||||
"command": "yarn",
|
||||
"args": ["build"]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
이제, `src-tauri/src/main.rs` 혹은 다른 Rust 파일에 중단점을 설정하고 `F5`를 눌러 디버깅을 시작할 수 있습니다.
|
||||
|
||||
[`vscode-lldb`]: https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb
|
||||
[Core Process of your Tauri app]: https://tauri.app/v1/reference/architecture/process-model#the-core-process
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
title: 개발 주기
|
||||
---
|
||||
|
||||
import CommandTabs from '@components/CommandTabs.astro';
|
||||
|
||||
### 1. 개발 서버 시작
|
||||
|
||||
이제 모든 것이 설정되었으므로 UI 프레임워크 또는 번들러에서 제공하는 애플리케이션 개발 서버를 시작해야 합니다(물론, 둘 중 하나를 사용한다고 가정).
|
||||
|
||||
:::note
|
||||
|
||||
모든 프레임워크에는 자체 개발 도구가 있습니다. 모든 내용을 다루거나 최신 정보로 갱신하는 것은 이 문서의 범위를 밖입니다.
|
||||
|
||||
:::
|
||||
|
||||
### 2. Tauri 개발 윈도우 시작
|
||||
|
||||
<CommandTabs
|
||||
npm="npm run tauri dev"
|
||||
yarn="yarn tauri dev"
|
||||
pnpm="pnpm tauri dev"
|
||||
cargo="cargo tauri dev"
|
||||
/>
|
||||
|
||||
이 명령을 처음 실행하면 Rust 패키지 관리자가 필요한 모든 패키지를 다운로드하고 빌드하는 데 몇 분이 소요됩니다. 이들은 캐시되기 때문에 코드만 재빌드하면 되므로 후속 빌드가 훨씬 더 빠릅니다.
|
||||
|
||||
Rust가 빌드를 완료하면 Webview가 열리고 웹 앱이 표시됩니다. 웹 앱을 변경할 수 있으며 도구에서 지원하는 경우, WebView는 브라우저처럼 자동으로 업데이트됩니다. Rust 파일을 변경하면 자동으로 다시 빌드되고 앱이 자동으로 다시 시작됩니다.
|
||||
|
||||
:::caution[Cargo.toml 및 소스 제어 정보]
|
||||
|
||||
프로젝트 저장소에서 `src-tauri/Cargo.toml`과 함께 `src-tauri/Cargo.lock`을 git에 커밋해야 합니다. 왜냐하면 Cargo는 결정된 빌드를 제공하기 위해 잠금 파일을 사용하기 때문입니다. 따라서, 모든 애플리케이션의 Cargo.lock을 체크인하는 것이 좋습니다. 단, `src-tauri/target` 폴더 또는 그 내용을 커밋하면 안 됩니다.
|
||||
|
||||
:::
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
title: 개발
|
||||
description: Tauri로 개발하기 위한 핵심 개념
|
||||
---
|
||||
|
||||
import { LinkCard, CardGrid } from '@astrojs/starlight/components';
|
||||
|
||||
<CardGrid>
|
||||
<LinkCard title="개발 주기" href="/ko/guides/develop/development-cycle/" />
|
||||
<LinkCard
|
||||
title="종속성 업데이트하기"
|
||||
href="/ko/guides/develop/updating-dependencies"
|
||||
/>
|
||||
</CardGrid>
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
title: 종속성 업데이트하기
|
||||
---
|
||||
|
||||
import CommandTabs from '@components/CommandTabs.astro';
|
||||
|
||||
## Npm 패키지 업데이트
|
||||
|
||||
`tauri` 패키지를 사용할 경우:
|
||||
|
||||
<CommandTabs
|
||||
npm="npm install @tauri-apps/cli@latest @tauri-apps/api@latest"
|
||||
yarn="yarn up @tauri-apps/cli @tauri-apps/api"
|
||||
pnpm="pnpm update @tauri-apps/cli @tauri-apps/api --latest"
|
||||
/>
|
||||
|
||||
다음 항목을 사용하여 명령줄에서 최신 버전의 Tauri를 검색할 수 있습니다:
|
||||
|
||||
<CommandTabs
|
||||
npm="npm outdated @tauri-apps/cli"
|
||||
yarn="yarn outdated @tauri-apps/cli"
|
||||
pnpm="pnpm outdated @tauri-apps/cli"
|
||||
/>
|
||||
|
||||
대안으로 `vue-cli-plugin-tauri` 방식을 사용하는 경우:
|
||||
|
||||
<CommandTabs
|
||||
npm="npm install vue-cli-plugin-tauri@latest"
|
||||
yarn="yarn up vue-cli-plugin-tauri"
|
||||
pnpm="pnpm update vue-cli-plugin-tauri --latest"
|
||||
/>
|
||||
|
||||
## Cargo 패키지 업데이트
|
||||
|
||||
[`cargo outdated`][]나 crates.io 페이지에서 이전 패키지 내용을 확인할 수 있습니다: [tauri][] / [tauri-build][].
|
||||
|
||||
`src-tauri/Cargo.toml`에서 `tauri`와 `tauri-build` 를 아래와 같이 바꿔줍니다.
|
||||
|
||||
```toml
|
||||
[build-dependencies]
|
||||
tauri-build = "%version%"
|
||||
|
||||
[dependencies]
|
||||
tauri = { version = "%version%" }
|
||||
```
|
||||
|
||||
여기서 `%version%`는 위에 버전 번호입니다. {/* TODO: (You can just use the `MAJOR.MINOR`) version, like `0.9`. . */}
|
||||
|
||||
그리고, 아래와 같이 실행합니다.
|
||||
|
||||
```shell
|
||||
cd src-tauri
|
||||
cargo update
|
||||
```
|
||||
|
||||
또한, [cargo-edit][]에서 제공하는 `cargo upgrade` 명령을 실행하여 이 모든 작업을 자동으로 수행할 수 있습니다.
|
||||
|
||||
[`cargo outdated`]: https://github.com/kbknapp/cargo-outdated
|
||||
[tauri]: https://crates.io/crates/tauri/versions
|
||||
[tauri-build]: https://crates.io/crates/tauri-build/versions
|
||||
[cargo-edit]: https://github.com/killercup/cargo-edit
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: 테스트
|
||||
description: Tauri 런타임 내, 외부 테스트 기술
|
||||
---
|
||||
|
||||
Tauri 런타임 내, 외부 테스트 기술
|
||||
|
||||
import { LinkCard, CardGrid } from '@astrojs/starlight/components';
|
||||
|
||||
<CardGrid>
|
||||
<LinkCard title="Tauri API 모킹" href="/ko/guides/develop/tests/mocking/" />
|
||||
<LinkCard title="WebDriver" href="/ko/develop/tests/webdriver" />
|
||||
</CardGrid>
|
||||
@@ -1,168 +0,0 @@
|
||||
---
|
||||
title: Tauri API 모킹
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
프런트엔드 테스트를 작성할 때 "가짜" Tauri 환경을 사용하여 창을 모의 시험하거나 IPC 호출을 가로채는 것이 일반적이며 이를 *mocking*이라고 합니다. [`@tauri-apps/api/mocks`][] 모듈은 이를 쉽게 할 수 있도록 몇 가지 도움이 되는 도구들을 제공합니다.
|
||||
|
||||
:::caution
|
||||
|
||||
실행 간 모의 상태 변경을 취소하려면, 각 테스트 실행 후 모킹을 지우는 것을 잊지 마십시오! 자세한 정보는 [`clearMocks()`][] 문서에서 확인할 수 있습니다.
|
||||
|
||||
:::
|
||||
|
||||
## IPC 요청
|
||||
|
||||
가장 일반적으로, IPC 요청을 가로채고 싶다면, 이것은 다양한 상황에서 도움이 될 수 있습니다.
|
||||
|
||||
- 백엔드 호출이 올바르게 이루어졌는지 확인
|
||||
- 백엔드 함수에서 다른 결과 모의 실험
|
||||
|
||||
Tauri는 IPC 요청을 가로채는 mockIPC 기능을 제공합니다. 특정 API에 대한 상세한 정보를 원할 경우 [여기][<code>mockipc()</code>]에서 확인할 수 있습니다.
|
||||
|
||||
:::note
|
||||
|
||||
다음 예제는 [Vitest][]를 사용하지만 jest와 같은 다른 프런트엔드 테스트 라이브러리를 사용할 수 있습니다.
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
import { beforeAll, expect, test } from "vitest";
|
||||
import { randomFillSync } from "crypto";
|
||||
|
||||
import { mockIPC } from "@tauri-apps/api/mocks";
|
||||
import { invoke } from "@tauri-apps/api/tauri";
|
||||
|
||||
// jsdom doesn't come with a WebCrypto implementation
|
||||
beforeAll(() => {
|
||||
Object.defineProperty(window, 'crypto', {
|
||||
value: {
|
||||
// @ts-ignore
|
||||
getRandomValues: (buffer) => {
|
||||
return randomFillSync(buffer);
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test("invoke simple", async () => {
|
||||
mockIPC((cmd, args) => {
|
||||
// simulated rust command called "add" that just adds two numbers
|
||||
if(cmd === "add") {
|
||||
return (args.a as number) + (args.b as number);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
때때로, IPC 호출에 대한 추가 정보를 추적하려는 경우가 있습니다. 명령이 몇 번 호출되었을까? 전혀, 호출되지 않았을까? 이를 테스트를 하기 위해 [`mockIPC()`][] 와 함께 다른 탐색, 모킹 도구를 사용할 수 있습니다.
|
||||
|
||||
```js
|
||||
import { beforeAll, expect, test, vi } from "vitest";
|
||||
import { randomFillSync } from "crypto";
|
||||
|
||||
import { mockIPC } from "@tauri-apps/api/mocks";
|
||||
import { invoke } from "@tauri-apps/api/tauri";
|
||||
|
||||
// jsdom doesn't come with a WebCrypto implementation
|
||||
beforeAll(() => {
|
||||
Object.defineProperty(window, 'crypto', {
|
||||
value: {
|
||||
// @ts-ignore
|
||||
getRandomValues: (buffer) => {
|
||||
return randomFillSync(buffer);
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test("invoke", async () => {
|
||||
mockIPC((cmd, args) => {
|
||||
// simulated rust command called "add" that just adds two numbers
|
||||
if(cmd === "add") {
|
||||
return (args.a as number) + (args.b as number);
|
||||
}
|
||||
});
|
||||
|
||||
// we can use the spying tools provided by vitest to track the mocked function
|
||||
const spy = vi.spyOn(window, "__TAURI_IPC__");
|
||||
|
||||
expect(invoke("add", { a: 12, b: 15 })).resolves.toBe(27);
|
||||
expect(spy).toHaveBeenCalled();
|
||||
});
|
||||
```
|
||||
|
||||
사이드카 또는 셸 명령에 대한 IPC 요청을 모방하려면 `spawn()`이나 `execute()`가 호출될 때 이벤트 핸들러의 ID를 가져와 이 ID를 사용하여 백엔드가 다시 보낼 이벤트를 내보내야 합니다:
|
||||
|
||||
```js
|
||||
mockIPC(async (cmd, args) => {
|
||||
if (args.message.cmd === 'execute') {
|
||||
const eventCallbackId = `_${args.message.onEventFn}`;
|
||||
const eventEmitter = window[eventCallbackId];
|
||||
|
||||
// 'Stdout' event can be called multiple times
|
||||
eventEmitter({
|
||||
event: 'Stdout',
|
||||
payload: 'some data sent from the process',
|
||||
});
|
||||
|
||||
// 'Terminated' event must be called at the end to resolve the promise
|
||||
eventEmitter({
|
||||
event: 'Terminated',
|
||||
payload: {
|
||||
code: 0,
|
||||
signal: 'kill',
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Windows
|
||||
|
||||
경우에 따라 윈도우 관련 코드(예: 시작 화면 윈도우) 가 있으므로 다른 창을 모의 실험해야 합니다. 가짜 윈도우 레이블을 생성하기 위해 [`mockWindows()`][] 함수를 사용할 수 있습니다. 첫 번째 문자열은 "현재" 윈도우(예, JavaScript 스스로가 윈도우라고 믿는)를 식별하고 다른 모든 문자열은 추가 창으로 처리됩니다.
|
||||
|
||||
:::note
|
||||
|
||||
[`mockWindows()`][]는 실제 윈도우 속성이 아닌 윈도우의 가짜 존재입니다. 윈도우 속성을 모의실험 해보기 위해, [`mockIPC()`][]를 사용하여 올바른 호출을 가로채야 합니다.
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
import { beforeAll, expect, test } from 'vitest';
|
||||
import { randomFillSync } from 'crypto';
|
||||
|
||||
import { mockWindows } from '@tauri-apps/api/mocks';
|
||||
|
||||
// jsdom doesn't come with a WebCrypto implementation
|
||||
beforeAll(() => {
|
||||
Object.defineProperty(window, 'crypto', {
|
||||
value: {
|
||||
// @ts-ignore
|
||||
getRandomValues: (buffer) => {
|
||||
return randomFillSync(buffer);
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('invoke', async () => {
|
||||
mockWindows('main', 'second', 'third');
|
||||
|
||||
const { getCurrent, getAll } = await import('@tauri-apps/api/window');
|
||||
|
||||
expect(getCurrent()).toHaveProperty('label', 'main');
|
||||
expect(getAll().map((w) => w.label)).toEqual(['main', 'second', 'third']);
|
||||
});
|
||||
```
|
||||
|
||||
<!-- TODO: Updates links to v2 -->
|
||||
|
||||
[`@tauri-apps/api/mocks`]: https://tauri.app/v1/api/js/mocks/
|
||||
[`mockipc()`]: https://tauri.app/v1/api/js/mocks#mockipc
|
||||
[`mockwindows()`]: https://tauri.app/v1/api/js/mocks#mockwindows
|
||||
[`clearmocks()`]: https://tauri.app/v1/api/js/mocks#clearmocks
|
||||
[vitest]: https://vitest.dev
|
||||
@@ -1,97 +0,0 @@
|
||||
---
|
||||
title: 지속적 통합
|
||||
description: WebDriver Testing
|
||||
---
|
||||
|
||||
Linux 및 일부 프로그램을 활용하여 가짜 출력 화면을 만들어서, CI의 [`tauri-driver`][]와 함께 [WebDriver][]테스트를 실행할 수 있습니다. 다음은 우리가 [이전에 함께 구축][]한 것과 [WebdriverIO][] 예제를 사용하여 GitHub Actions 예제입니다.
|
||||
|
||||
이것은 다음과 같은 가정을 의미합니다:
|
||||
|
||||
1. Tauri 애플리케이션은 `cargo build --release`를 실행할 때 저장소 루트 및 바이너리 빌드에 있음.
|
||||
2. [WebDriverIO][] 테스트 러너는 `webdriver/webdriverio` 디렉토리에 있으며, `yarn test`가 해당 디렉토리 내에서 사용될 때 실행됨.
|
||||
|
||||
다음 항목은 GitHub Actions workflow `.github/workflows/webdriver.yml` 작성된 내용입니다.
|
||||
|
||||
```yaml
|
||||
# run this action when the repository is pushed to
|
||||
on: [push]
|
||||
|
||||
# the name of our workflow
|
||||
name: WebDriver
|
||||
|
||||
jobs:
|
||||
# a single job named test
|
||||
test:
|
||||
# the display name of the test job
|
||||
name: WebDriverIO Test Runner
|
||||
|
||||
# we want to run on the latest linux environment
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
# the steps our job runs **in order**
|
||||
steps:
|
||||
# checkout the code on the workflow runner
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
# install system dependencies that Tauri needs to compile on Linux.
|
||||
# note the extra dependencies for `tauri-driver` to run which are: `webkit2gtk-driver` and `xvfb`
|
||||
- name: Tauri dependencies
|
||||
run: >-
|
||||
sudo apt-get update &&
|
||||
sudo apt-get install -y
|
||||
libgtk-3-dev
|
||||
libayatana-appindicator3-dev
|
||||
libwebkit2gtk-4.0-dev
|
||||
webkit2gtk-driver
|
||||
xvfb
|
||||
|
||||
# install the latest Rust stable
|
||||
- name: Rust stable
|
||||
uses: actions-rs/toolchain@v1
|
||||
with:
|
||||
toolchain: stable
|
||||
|
||||
# we run our rust tests before the webdriver tests to avoid testing a broken application
|
||||
- name: Cargo test
|
||||
uses: actions-rs/cargo@v1
|
||||
with:
|
||||
command: test
|
||||
|
||||
# build a release build of our application to be used during our WebdriverIO tests
|
||||
- name: Cargo build
|
||||
uses: actions-rs/cargo@v1
|
||||
with:
|
||||
command: build
|
||||
args: --release
|
||||
|
||||
# install the latest stable node version at the time of writing
|
||||
- name: Node v16
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 16.x
|
||||
|
||||
# install our Node.js dependencies with Yarn
|
||||
- name: Yarn install
|
||||
run: yarn install
|
||||
working-directory: webdriver/webdriverio
|
||||
|
||||
# install the latest version of `tauri-driver`.
|
||||
# note: the tauri-driver version is independent of any other Tauri versions
|
||||
- name: Install tauri-driver
|
||||
uses: actions-rs/cargo@v1
|
||||
with:
|
||||
command: install
|
||||
args: tauri-driver
|
||||
|
||||
# run the WebdriverIO test suite.
|
||||
# we run it through `xvfb-run` (the dependency we installed earlier) to have a fake
|
||||
# display server which allows our application to run headless without any changes to the code
|
||||
- name: WebdriverIO
|
||||
run: xvfb-run yarn test
|
||||
working-directory: webdriver/webdriverio
|
||||
```
|
||||
|
||||
[previously built together]: /ko/develop/tests/webdriver/example/webdriverio
|
||||
[webdriver]: https://www.w3.org/TR/webdriver/
|
||||
[`tauri-driver`]: https://crates.io/crates/tauri-driver
|
||||
[webdriverio]: https://webdriver.io/
|
||||
@@ -1,198 +0,0 @@
|
||||
---
|
||||
title: Selenium
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
import CommandTabs from '@components/CommandTabs.astro';
|
||||
|
||||
:::note[Example Application]
|
||||
|
||||
This [Selenium] guide expects you to have already gone through the [example Application setup] to follow
|
||||
step-by-step. The general information may still be helpful otherwise.
|
||||
|
||||
:::
|
||||
|
||||
This WebDriver testing example will use [Selenium][] and a popular Node.js testing suite. You are expected to already have Node.js installed, along with `npm` or `yarn` although the [finished example project][] uses `yarn`.
|
||||
|
||||
## 테스트를 위한 디렉토리 생성
|
||||
|
||||
프로젝트에서 테스트를 작성할 공간을 만들어 봅시다. We will be using a nested directory for this example project as we will later also go over other frameworks, but typically you will only need to use one. `mkdir -p webdriver/selenium`를 사용하여 디렉토리를 생성할 것입니다. The rest of this guide will assume you are inside the `webdriver/selenium` directory.
|
||||
|
||||
## Selenium 프로젝트 초기화 하기
|
||||
|
||||
We will be using a pre-existing `package.json` to bootstrap this test suite because we have already chosen specific dependencies to use and want to showcase a simple working solution. The bottom of this section has a collapsed guide on how to set it up from scratch.
|
||||
|
||||
`package.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "selenium",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"dependencies": {
|
||||
"chai": "^4.3.4",
|
||||
"mocha": "^9.0.3",
|
||||
"selenium-webdriver": "^4.0.0-beta.4"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
We have a script that runs [Mocha] as a test framework exposed as the `test` command. We also have various dependencies
|
||||
that we will be using to run the tests. [Mocha] as the testing framework, [Chai] as the assertion library, and
|
||||
[`selenium-webdriver`] which is the Node.js [Selenium] package.
|
||||
|
||||
<details>
|
||||
<summary>Click me if you want to see how to set a project up from scratch</summary>
|
||||
|
||||
If you want to install the dependencies from scratch, just run the following command.
|
||||
|
||||
<CommandTabs
|
||||
npm="npm install mocha chai selenium-webdriver"
|
||||
yarn="yarn add mocha chai selenium-webdriver"
|
||||
/>
|
||||
|
||||
I suggest also adding a `"test": "mocha"` item in the `package.json` `"scripts"` key so that running Mocha can be called
|
||||
simply with
|
||||
|
||||
<CommandTabs npm="npm test" yarn="yarn test" />
|
||||
|
||||
</details>
|
||||
|
||||
## Testing
|
||||
|
||||
Unlike the [WebdriverIO Test Suite](/ko/develop/tests/webdriver/example/webdriverio#config), Selenium does not come out of the box with a Test Suite and
|
||||
leaves it up to the developer to build those out. We chose [Mocha], which is pretty neutral and not related to WebDrivers, so our script will need to do a bit of work to set up everything for us in the correct order. [Mocha] expects a
|
||||
testing file at `test/test.js` by default, so let's create that file now.
|
||||
|
||||
`test/test.js`:
|
||||
|
||||
```js
|
||||
const os = require('os');
|
||||
const path = require('path');
|
||||
const { expect } = require('chai');
|
||||
const { spawn, spawnSync } = require('child_process');
|
||||
const { Builder, By, Capabilities } = require('selenium-webdriver');
|
||||
|
||||
// create the path to the expected application binary
|
||||
const application = path.resolve(
|
||||
__dirname,
|
||||
'..',
|
||||
'..',
|
||||
'..',
|
||||
'target',
|
||||
'release',
|
||||
'hello-tauri-webdriver'
|
||||
);
|
||||
|
||||
// keep track of the webdriver instance we create
|
||||
let driver;
|
||||
|
||||
// keep track of the tauri-driver process we start
|
||||
let tauriDriver;
|
||||
|
||||
before(async function () {
|
||||
// set timeout to 2 minutes to allow the program to build if it needs to
|
||||
this.timeout(120000);
|
||||
|
||||
// ensure the program has been built
|
||||
spawnSync('cargo', ['build', '--release']);
|
||||
|
||||
// start tauri-driver
|
||||
tauriDriver = spawn(
|
||||
path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'),
|
||||
[],
|
||||
{ stdio: [null, process.stdout, process.stderr] }
|
||||
);
|
||||
|
||||
const capabilities = new Capabilities();
|
||||
capabilities.set('tauri:options', { application });
|
||||
capabilities.setBrowserName('wry');
|
||||
|
||||
// start the webdriver client
|
||||
driver = await new Builder()
|
||||
.withCapabilities(capabilities)
|
||||
.usingServer('http://127.0.0.1:4444/')
|
||||
.build();
|
||||
});
|
||||
|
||||
after(async function () {
|
||||
// stop the webdriver session
|
||||
await driver.quit();
|
||||
|
||||
// kill the tauri-driver process
|
||||
tauriDriver.kill();
|
||||
});
|
||||
|
||||
describe('Hello Tauri', () => {
|
||||
it('should be cordial', async () => {
|
||||
const text = await driver.findElement(By.css('body > h1')).getText();
|
||||
expect(text).to.match(/^[hH]ello/);
|
||||
});
|
||||
|
||||
it('should be excited', async () => {
|
||||
const text = await driver.findElement(By.css('body > h1')).getText();
|
||||
expect(text).to.match(/!$/);
|
||||
});
|
||||
|
||||
it('should be easy on the eyes', async () => {
|
||||
// selenium returns color css values as rgb(r, g, b)
|
||||
const text = await driver
|
||||
.findElement(By.css('body'))
|
||||
.getCssValue('background-color');
|
||||
|
||||
const rgb = text.match(/^rgb\((?<r>\d+), (?<g>\d+), (?<b>\d+)\)$/).groups;
|
||||
expect(rgb).to.have.all.keys('r', 'g', 'b');
|
||||
|
||||
const luma = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b;
|
||||
expect(luma).to.be.lessThan(100);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
If you are familiar with JS testing frameworks, `describe`, `it`, and `expect` should look familiar. We also have
|
||||
semi-complex `before()` and `after()` callbacks to set up and teardown mocha. Lines that are not the tests themselves
|
||||
have comments explaining the setup and teardown code. If you were familiar with the Spec file from the
|
||||
[WebdriverIO example](/ko/develop/tests/webdriver/example/webdriverio#spec), you notice a lot more code that isn't tests, as we have to set up a few
|
||||
more WebDriver related items.
|
||||
|
||||
## Running the Test Suite
|
||||
|
||||
Now that we are all set up with our dependencies and our test script, let's run it!
|
||||
|
||||
<CommandTabs npm="npm test" yarn="yarn test" />
|
||||
|
||||
We should see output the following output:
|
||||
|
||||
```text
|
||||
➜ selenium git:(main) ✗ yarn test
|
||||
yarn run v1.22.11
|
||||
$ Mocha
|
||||
|
||||
|
||||
Hello Tauri
|
||||
✔ should be cordial (120ms)
|
||||
✔ should be excited
|
||||
✔ should be easy on the eyes
|
||||
|
||||
|
||||
3 passing (588ms)
|
||||
|
||||
Done in 0.93s.
|
||||
```
|
||||
|
||||
We can see that our `Hello Tauri` test suite we created with `describe` had all 3 items we created with `it` pass their
|
||||
tests!
|
||||
|
||||
With [Selenium] and some hooking up to a test suite, we just enabled e2e testing without modifying our Tauri
|
||||
application at all!
|
||||
|
||||
[example application setup]: /ko/develop/tests/webdriver/example/
|
||||
[selenium]: https://selenium.dev/
|
||||
[finished example project]: https://github.com/chippers/hello_tauri
|
||||
[mocha]: https://mochajs.org/
|
||||
[chai]: https://www.chaijs.com/
|
||||
[`selenium-webdriver`]: https://www.npmjs.com/package/selenium-webdriver
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
title: WebDriver
|
||||
description: WebDriver Testing
|
||||
---
|
||||
|
||||
:::caution[현재 pre-alpha]
|
||||
|
||||
Tauri 위한 Webdriver 지원은 아직 pre-alpha 상태입니다. [tauri-driver][]와 같은 전용 도구는 아직 개발 중이고, 시간이 지나고 필요에 따라 변경될 수 있습니다. 추가적으로, 오직 Windows와 Linux만 현재 지원합니다.
|
||||
|
||||
:::
|
||||
|
||||
[WebDriver][]는 주로 자동 테스트용 웹 문서와 상호작용하는 표준화된 인터페이스입니다. Tauri는 교차 플랫폼 래퍼 [`tauri-driver`][] 아래에 있는 기본 플랫폼의 [WebDriver][] 서버를 활용하여 [WebDriver][] 인터페이스를 지원합니다.
|
||||
|
||||
## 시스템 의존성
|
||||
|
||||
다음을 실행하여 최신 [`tauri-driver`][] 를 설치하거나, 기존 설치를 업데이트 합니다.
|
||||
|
||||
```shell
|
||||
cargo install tauri-driver
|
||||
```
|
||||
|
||||
현재 플랫폼의 기본 [WebDriver][] 서버를 사용하기 때문에 지원되는 플랫폼에서 [`tauri-driver`][]를 실행하기 위한 몇 가지 요구 사항이 있습니다. 지원하는 플랫폼은 현재 Linux와 Windows로 제한됩니다.
|
||||
|
||||
### Linux
|
||||
|
||||
Linux 플랫폼에서는 `WebKitWebDriver`를 사용합니다. 일부 배포판은 일반 WebKit 패키지와 함께 번들로 제공되기 때문에 이 바이너리가 존재하는지 확인해야 합니다(`WebKitWebDriver 같은` 명령). Debian 기반 배포판 같은 일부 플랫폼에서는 `webkit2gtk-driver` 같이 분리된 패키지로 제공합니다.
|
||||
|
||||
### Windows
|
||||
|
||||
Make sure to grab the version of [Microsoft Edge Driver][] that matches your Windows Edge version that the application is being built and tested on. 이것은 최신 Windows 설치에서 항상 최신 안정 버전이어야 합니다. 만약, 두 버전이 일치하지 않으면 연결을 시도하는 동안 WebDriver 테스트 도구가 중단될 수 있습니다.
|
||||
|
||||
다운로드 항목에는 `msedgedriver.exe`라는 바이너리가 포함되어 있습니다. [`tauri-driver`][]는 `$PATH`를 통해서 바이너리를 찾기 때문에, 해당 드라이버 경로에서 사용하거나, [`tauri-driver`][]에서 `--native-driver` 옵션을 사용하세요. Edge 및 Edge 드라이버 버전이 Windows CI 시스템에서 동기화 상태를 유지하도록 프로세스의 일부로 CI 설정하면 드라이버를 자동으로 다운로드할 수 있습니다. 이를 수행하는 방법에 대한 안내는 나중에 추가될 것입니다.
|
||||
|
||||
## 예제 앱
|
||||
|
||||
[다음 섹션](example/setup)은 WebDriver와 함께 애플리케이션을 테스트하는 최소한의 예제를 어떻게 만들지 순차적으로 보여주는 안내서입니다.
|
||||
|
||||
안내서의 결과를 보고 싶거나, 활용 가능한 최종 코드 베이스를 보고 싶은 경우, https://github.com/chippers/hello_tauri 를 방문하여 확인할 수 있습니다. 이 예제는 GitHub Actions으로 테스트하기 위한 CI 스크립트와 함께 제공되지만, 더 관심이 있다면 개념을 좀 더 자세히 설명하는 [WebDriver CI](ci) 안내서를 참고하세요.
|
||||
|
||||
import { LinkCard, CardGrid } from '@astrojs/starlight/components';
|
||||
|
||||
<CardGrid>
|
||||
<LinkCard title="예제 설정" href="/ko/develop/tests/webdriver/example/" />
|
||||
<LinkCard title="Selenium" href="/ko/develop/tests/webdriver/example/selenium" />
|
||||
<LinkCard title="WebdriverIO" href="/ko/develop/tests/webdriver/example/webdriverio" />
|
||||
</CardGrid>
|
||||
|
||||
## 지속적 통합 (CI)
|
||||
|
||||
The above examples also comes with a CI script to test with GitHub actions, but you may still be interested in the below WebDriver CI guide as it explains the concept a bit more.
|
||||
|
||||
<LinkCard title="지속적 통합 (CI)" href="/ko/develop/tests/webdriver/ci" />
|
||||
|
||||
[webdriver]: https://www.w3.org/TR/webdriver/
|
||||
[`tauri-driver`]: https://crates.io/crates/tauri-driver
|
||||
[tauri-driver]: https://crates.io/crates/tauri-driver
|
||||
[microsoft edge driver]: https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/
|
||||
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 167 KiB |
Reference in New Issue
Block a user